2013-04-13 36 views
1

我有一个选择多,我绑定到模型,我想然后选择一些先前使用第二个模型选择的值。我认为这是一个简单直接的事情,但在淘汰赛中它似乎比应该更难。这是我到目前为止。 FiddlerKnockout.js预选选择多

一个选择多

<select data-bind="options:availableThings,optionsText: 'Title', selectedOptions: selectedThings" size="5" multiple="true"></select> 

我的模型

var initialThingsModel = [ 
      {"Id":1,"Title":"First"}, 
      {"Id":2,"Title":"Next"}, 
      {"Id":3,"Title":"Another"}, 
      {"Id":4,"Title":"Last"} 
     ]; 
     var initialSelectedThingsModel = [ 
      {"Id":2,"Title":"Next"}, 
      {"Id":4,"Title":"Last"} 
     ]; 

然后结合的第一款车型,并且保存和提交选定的值管道的其余部分:

var viewModel = { 
      availableThings: ko.observableArray(initialThingsModel), 
      selectedThings: ko.observableArray(initialSelectedThingsModel), 
      save: function() {     
       $.ajax({ 
        url: '/home', 
        type: 'POST', 
        data: ko.toJSON(this.selectedThings), 
        dataType: "json", 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         alert(data.Message); 
        } 
       }); 
      } 
     }; 

     ko.applyBindings(viewModel); 

我面对的问题是绑定initialSelectedThingsModel,以便t他选择的列表预先填入选定的项目。

宽泛的问题,是淘汰了正确的解决方案还是骨干提供了一种更简单的方法来实现这种事情?

回答

1

你的绑定是正确的。问题是您传入的对象selectedThings不存在于availableThings中。你需要在同一个对象来传递,就像这样:

var initialSelectedThingsModel = [ 
     initialThingsModel[0], 
     initialThingsModel[3] 
    ]; 

我没有与骨干足够的经验说,如果它会更好,但你的淘汰赛代码看起来很简洁给我。不知道你能做到多少简单。

+0

谢谢,现在的问题是因为我的模型都来自服务器,什么是从第一个模型,也是在第二个模型中创建一个项目模型的最明智的方式,如果我在c#中做到这一点也许也许使用以下代码initialThingsModel.GetAll()。其中​​(x => initialSelectedThingsModel.Id.Contains(x.Id))。ToList(); – Fishbaum

+0

想着它不会工作 – Fishbaum

+0

要在所有浏览器中支持,它是嵌套'for's和'if'的嵌套。在现代浏览器中,你也可以执行'initialSelectedThingsModel = initialThingsModel.filter(function(item){return initialSelectedThingsModel.some(function(i){return i.Id === item.Id;});});' –