使用knockoutjs绑定和显示字典

时间:2012-07-19 15:52:06

标签: javascript knockout.js

我使用淘汰赛,我在我的viewmodel中有一个observablearray(mappedCompaignByInterest),其中包含对象数组,每个对象都像字典一样,它包含字符串的键,以及作为对象数组的值(Compaign)。请问如何将此对象与knockoutjs上的表绑定。

这是我的viewmodel:

    function DashboardViewModel() {
    var self = this;        
    self.BuzzCompaignByInterest = ko.observableArray([]);

}

这是用于从服务器加载数据

  //    Load initial state from server,
    $.getJSON("/Dashboard", function (Data) {            
        var mappedCompaignByInterest = Data.BuzzCompaignByInterest;            
        self.BuzzCompaignByInterest(mappedCompaignByInterest);                        
       });

请注意,Data.BuzzCompaignByInterest希望我从服务器获取它是一个字典,键是一个字符串,值是一个对象数组(Compaign) 这是Compaign类的特性:

 public class BuzzCompaignModel
{
    public long BuzzCompaignId { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
 }

请问如何在BuzzComapignByInterest中显示数据(viewmodel中的observablearray)

1 个答案:

答案 0 :(得分:1)

我假设你的字典项看起来像这个类:

function DictionaryItem(key, value) {
                this.key = key;
                this.value = value;
            }

其中值是您的BuzzCompaignModel,如下所示:

function BuzzCompaignModel(id, name, description) {
            this.id = id;
            this.name = name;
            this.description = description;
        }

在使用初始化的BuzzCompaignModel分配DictionaryItem集合后,您可以使用以下方式绑定此数组:

    <table>
        <tbody data-bind="foreach:BuzzCompaignByInterest">

            <tr>
                <td data-bind='text:key'></td>
                <td data-bind='text:value.id'></td>
                <td data-bind='text:value.name'></td>
                <td data-bind='text:value.description'></td>
            </tr>
        </tbody>
    </table>

jsfiddle示例