Javascript 在MVC 3中生成敲除标记

我们目前正在为我们的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');
   }

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

所以

会产生类似于

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

所以我要说清楚的是，我要做的是根据我的模型生成计算值

谢谢你的帮助

干杯。

---

ste.

也许这将有助于

进一步了解Pavel上面提到的内容，有一个很好的例子向“T”展示了您的场景：

以下是该页面的抄本：

型号：

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"
    });
  }
}

<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>

自动生成的Html:

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"
    });
  }
}

<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>

名字：


姓氏：

你好
var viewModelJs={“FirstName”：“Steve”，“LastName”：“Sanderson”}；
var viewModel=ko.mapping.fromJS（viewModelJs）；
viewModel.FullName=ko.computed（函数（）{
试一试{
返回this.FirstName（）+“”+this.LastName（）；
} 
catch（e）{returnnull；}；
}，视图模型）；
应用绑定（视图模型）；

看一下脚本#

---

尝试淘汰JS官方示例：

击倒JS教程：

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

谢谢，

---

-Naren

我想知道，你试过敲除映射插件吗？@Jupaol-我试过了，但遗憾的是它仍然没有提供计算值。。干杯。这是对这个问题的一个很好的回答（有很好的例子），但是我想说的是，作为旁白，我不认为

名字：@ko.Html.TextBox（m=>m.FirstName）

比

名字：

复杂，开发人员仍然需要用第一种方法理解Html。这与其说是你的答案，不如说是对问题的批评。仲裁者——非常好的想法。正如您所说，最终的游戏是让经验相对较少的开发人员掌握后端功能，而前端的开发人员则较少。当然，这里的html是由helper（

@ko.Apply（Model

）生成的，因此对于一些现存的html来说，如果这些家伙遵循编码实践，直到他们在心理上100%掌握了封面下发生的事情，那么这些html可能会起作用。