.NET MVC 4清單，KnockoutJS數據bind'ing

Question

行，所以我有這樣的觀點，到目前爲止

function AppViewModel() { 
       this.title = ko.observable("@Model.Title"); 
       this.firstName = ko.observable("@Model.FirstName"); 
       this.lastName = ko.observable("@Model.LastName"); 

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

     } 

     @{ 
      var jsList = Html.Raw(JsonConvert.SerializeObject(ViewBag.Countries)); 
     } 

     function newViewModel() { 
      var theAppViewModel = new AppViewModel() 
      var g = ko.mapping.fromJS(theAppViewModel); 

      var viewModel = { vm: ko.observable([]) } 
      viewModel.vm = ko.mapping.fromJS(@jsList); 

      ko.applyBindings(g); 
     } 

     // Activates knockout.js 
     $(document).ready(function() { 
      ko.applyBindings(new newViewModel()); 
     }); 

<ul style="list-style-type: none; float: left; margin-top: 20px; "> 
    <li> 
     @Html.LabelFor(model => model.Title) 
     <input data-bind="value: title"/> 
    </li> 
    <li> 
     @Html.LabelFor(model => model.FirstName) 
     <input data-bind="value: firstName" /> 
    </li> 
    <li> 
     @Html.LabelFor(model => model.LastName) 
     <input data-bind="value: lastName" /> 
    </li> 

    <li> 
     Full Name 
     <Span data-bind="text: fullName"></Span> 
    </li> 

    <li> 
     Coutries: 
     <select data-bind="foreach: vm"> 

       <option data-bind="text: CountryName"></option> 

     </select> 
    </li>  

</ul> 

我的控制器有這個就可以了，

public ActionResult Index() 
     { 
      //ViewBag.Message = "KO js in mvc 4"; 
     ViewBag.Countries = new List<Country>(){ 
      new Country() 
      { 
       Id = 1, 
       CountryName = "America", 
       Abbreviation = "USA" 
      }, 
      new Country() 
      { 
       Id = 2, 
       CountryName = "United Kingdon", 
       Abbreviation = "UK" 
      }, 
      new Country() 
      { 
       Id = 3, 
       CountryName = "Irland", 
       Abbreviation = "IRL", 
      } 
     }; 

     var vm = new PersonViewModel() 
     { 
      Id = 1,     
      DateOfBirth = new DateTime(1993, 01, 22), 

      Title = "Miss", 
      FirstName = "Jamie", 
      LastName = "Oscar", 
     }; 

     return View(vm); 
    } 

我可以返回從控制器列表像這樣的標準循環：

 <select> 
      @foreach(var c in ViewBag.Countries) 
      { 
       <option>@c.CountryName</option> 
      } 
     </select> 

但我想將結果綁定到列表Via Knockout.js。

Answer 1

它現在已經走到了我的注意，我現在可以淘汰賽JSON結果綁定到@html.DropDownListFor屬性幫手，仍然從淘汰賽我有一個下拉列表綁定我的數據通過基因敲除JSON數組對象填充，但隨後也結合這對MVC 4模型中，這可以在控制器中，然後使用和傳遞迴WCF或LINQ現在到SQL數據庫

@Html.DropDownListFor(m => m.SelectedAuthType, 
     (SelectList)Model.authlevellistItems, 
new { id = "alddl", data_bind = " options: Countries, optionsText: 'CountryName', optionsValue: 'Id'" }) 

作品完美地與模型以及JSON敲門聲結果。

Answer 2

您當前的viewModel即包含的國家/地區列表未綁定，唯一綁定的視圖模型爲g您打電話給applyBinding()。此外，沒有一點叫applyBinding()兩次（在同一元素上）。

試試這個：

$(document).ready(function() { 
    var vm = new AppViewModel(); 
    vm.Countries = ko.mapping.fromJS(@jsList); 
    ko.applyBindings(vm); 
}); 

<select data-bind="value: countryId, 
        options: Countries, 
        optionsText: 'CountryName', 
        optionsValue: 'Id'"></select> 

請記住，在value指令指person的選擇CountryId但是您目前沒有在您的視圖模型有這樣一個領域。

考慮將其添加爲好：

var vm = new PersonViewModel() 
     { 
     Id = 1,     
     DateOfBirth = new DateTime(1993, 01, 22), 
     Title = "Miss", 
     FirstName = "Jamie", 
     LastName = "Oscar", 
     CountryId = 1 
     }; 

function AppViewModel() { 
     this.title = ko.observable("@Model.Title"); 
     this.firstName = ko.observable("@Model.FirstName"); 
     this.lastName = ko.observable("@Model.LastName"); 
     this.countryId = ko.observable(@Model.CountryId); 
     }