1

我想对使用 knockout.js 创建的表单元素进行一些服务器端模型绑定，使用附加到每个动态创建的 DOM 元素的一些自定义名称属性。我知道我可以使用 AJAX，但本机 HTML 表单帖子现在对我来说效果更好。js 文件如下所示：

function MyModel(){ 
   var self = this;
   var count = 0;
   var insertItem = function(eleToInsertAfter){
       var index = self.items.indexOf(eleToInsertAfter),
           notFound = -1;

       var item = {
           type: '',
           description: ''
       };

       if(index == notFound){
           self.items.push(item); // there are no items yet, just push this item
       } else {
           self.items.spilce(++index, 0, item); // insert after the 'eleToInsertAfter' index
       }
       ++count;
   }

   self.title = ko.observable('');
   self.items = ko.observableArray([]);

   self.insert = function(eleToInsertAfter){
       insertItem(eleToInsertAfter);
   }

   // insert the first item
   self.insert({
           type: '',
           description: ''
       });
}
   ko.applyBindings(new MyModel());

html 标记如下所示：

<form method="post" action="/controller/action/">
     <input type="text" data-bind="value: title" />
     <ol data-bind="foreach: items">
          <li> 
               <!--I'd like to achieve this effect *name="[0].type"* and *name="[0].description"*, and so on -->
               <input type="text" data-bind="value: type, *attr: {name = '['+$index+'].type'}*" />
               <input type="text" data-bind="value: description, *attr: {name = '['+$index+'].description'}*" /><br />
               <button data-bind="click: $root.insert">Add Item</button>
          </li>
     </ol>
     <input type="submit" value="Submit" />
</form>

如果我能达到上述效果，那么 MVC 控制器动作可能如下所示：

public ActionResult action(MyModelCS model){
    // do something

    return View();
}

MyModelCS 看起来像这样：

public class MyModelCS {
    public string title { get; set; }
    public string[] type { get; set; }
    public string[] description { get; set; }
}

我只使用 jQuery 实现了与此类似的版本，但现在我需要使用 Knockout.js 来执行类似的版本。我是 Knockout 的新手，但我搜索了文档以找到一些帮助，但没有任何运气......请帮助......

4

1 回答 1

2

$index是一个可观察的，所以你需要解开：$index()

<input type="text" 
   data-bind="value: type, attr: {name = '['+$index()+'].type'}" />
<input type="text"
   data-bind="value: description, attr: {name = '['+$index()+'].description'}" />
于 2012-11-26T06:51:00.277 回答