在 MVC 3 中生成淘汰标记答案

【问题标题】：Generating Knockout Markup in MVC 3在 MVC 3 中生成淘汰标记
【发布时间】：2012-07-12 01:52:14
【问题描述】：

我们目前正在为我们的 MVC 客户端编写一个新的基础架构，并且我们正在努力做到这一点，以便开发人员不需要过多的 Javascript（当前的开发池主要基于桌面）

到目前为止，我为我们的剔除脚本所做的是创建一个扩展方法，该方法基本上使用反射基于模型生成所有剔除内容。这对于没有计算值的简单模型非常有效，并且到目前为止工作正常很好。

例如，假设我们有这个类

public class AppViewModel
  {
     public string FirstName {get; set;}
     public string LastName {get; set;}
  }

将生成以下内容并将其添加到视图中

  function AppViewModel() {
    this.firstName = ko.observable('Bob');
    this.lastName = ko.observable('Smith');
   }

我真正喜欢做的是支持模型中的计算值。但我就是想不出办法

所以

    public FullName()
{
return this.FirstName + " " + this.LastNAme
}

会产生类似的东西

 this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

所以为了清楚起见 - 我要做的是根据我的模型生成计算值。

感谢您的帮助

干杯。步骤。

【问题讨论】：

我在想，你用knockout-mapping插件试过了吗？？？
@Jupaol - 我已经尝试过了，但遗憾的是它仍然没有提供计算值.. 干杯。

标签： javascript asp.net asp.net-mvc-3 knockout.js

【解决方案1】：

除了上面提到的 Pavel 之外，还有一个很好的示例将您的场景显示为“T”：

http://knockoutmvc.com/HelloWorld

这是来自页面的转录：

型号：

public class HelloWorldModel
{
  public string FirstName { get; set; }
  public string LastName { get; set; }

  public Expression<Func<string>> FullName()
  {
    return () => FirstName + " " + LastName;
  }
}

剃须刀：

@using PerpetuumSoft.Knockout
@model KnockoutMvcDemo.Models.HelloWorldModel           
@{
  var ko = Html.CreateKnockoutContext();
}
<p>First name: @ko.Html.TextBox(m => m.FirstName)</p>
<p>Last name: @ko.Html.TextBox(m => m.LastName)</p>
<h2>Hello, @ko.Html.Span(m => m.FullName())!</h2>

@ko.Apply(Model)

控制器：

public class HelloWorldController : BaseController
{
  public ActionResult Index()
  {
    InitializeViewBag("Hello world");
    return View(new HelloWorldModel
    {
      FirstName = "Steve",
      LastName = "Sanderson"
    });
  }
}

自动生成的 Html：

<p>
    First name:
    <input data-bind="value : FirstName" /></p>
<p>
    Last name:
    <input data-bind="value : LastName" /></p>
<h2>
    Hello, <span data-bind="text : FullName"></span>!</h2>

<script type="text/javascript">
    var viewModelJs = { "FirstName": "Steve", "LastName": "Sanderson" };
    var viewModel = ko.mapping.fromJS(viewModelJs);
    viewModel.FullName = ko.computed(function () {
        try {
            return this.FirstName() + ' ' + this.LastName();
        } 
        catch (e) { return null; };
    }, viewModel);
    ko.applyBindings(viewModel);
</script>

【讨论】：

这是对这个问题的一个很好的答案（有很好的例子）但是我想顺便说一下我不认为First name: @ko.Html.TextBox(m => m.FirstName) 没有First name: <input data-bind="value : FirstName" /> 复杂，开发人员仍然必须用第一种方法理解 HTML。这更像是对问题的批评，而不是您的回答。
仲裁者 - 很好的想法。正如您所说，最终游戏是让经验相对较少的开发人员掌握后端功能，而前端则更少。当然，这里的 html 是由帮助程序 (@ko.Apply(Model) 生成的，所以对于现存的一些人来说，只要他们遵循编码实践，直到他们在精神上 100% 掌握幕后发生的事情，这可能会起作用。

【解决方案2】：

也许会有所帮助http://knockoutmvc.com/

【讨论】：

【解决方案3】：

看看脚本#

http://projects.nikhilk.net/ScriptSharp/

【讨论】：

【解决方案4】：

试试knockout JS官方例子：http://knockoutjs.com/examples/

Knockout JS 教程：http://learn.knockoutjs.com/

以上链接将帮助您学习淘汰赛 JS。

谢谢， -娜莲

【讨论】：