2012-11-28 105 views
1
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>title</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script> 

    <script type="text/javascript" src="/Scripts/knockout-2.2.0.js"></script> 
    <script type="text/javascript" src="/Scripts/knockout.mapping-latest.js"></script> 
    <script type="text/javascript" src="/Scripts/jquery.form.min.js"></script> 
    <script type="text/javascript" src="/Scripts/myKnockout.js"></script> 

</head> 

<body> 
<h2>Work with dishes.</h2> 

<select data-bind="options:$root.dishes, optionText:'name' " multiple="multiple"></select> 
</body> 
</html> 

myKnockout.js工作:從服務器淘汰賽。與<select>

function Dish(data) { 
    this.name = ko.observable(data.Name); 
    this.price = ko.observable(data.Price); 
} 

function ViewModel() { 

    var self = this; 

    self.dishes = ko.observableArray(); 

    $.getJSON("/Dishes/GetModel", function (allData) { 
     var mappedDish = $.map(allData.Dishes, function (item) { return new Dish(item); }); 
     self.dishes(mappedDish); 
    }); 
} 

$(document).ready(function() { 
    ko.applyBindings(new ViewModel()); 
}); 

數據:

{"Dishes":[{"Name":"Bread","Price":12.00000,"Description":"Delicious","Categories":[],"Complexs":[],"Id":1},{"Name":"Butter","Price":3.00000,"Description":"Unpalatable","Categories":[],"Complexs":[],"Id":2}]} 

爲什麼 '選擇' 顯示我的2項:[object Object][object Object]

請對不起我英語。

回答

0

您在options數據綁定表達式中有一個錯字,正確的屬性名稱爲optionsText而不是optionText。

所以你需要寫

<select data-bind="options:$root.dishes, optionsText:'name'" multiple="multiple"> 

隨着misstyped屬性名的KO仍然可以解析綁定是不會知道的名稱,以便它只是打印出的字符串表示要使用的值目的。

Demo JSFiddle.