KnockoutJS绑定到Key/Value对

Question

我试图用KnockoutJS绑定到键/值对数据:

this.personal = {
  "name" : "Chuck",
  "country" : "USA"
};

在我的HTML中我使用$ data绑定:

<ul data-bind="foreach: personal">

  <li data-bind="text: $data"></li>

</ul>

这导致:

[object Object]

[object Object]

如果我想看到这个,有人知道我的绑定应该是什么样的:

name: Chuck

country: USA

换句话说......我怎么能显示属性名称和属性值？

编辑:有人指着我:https://github.com/jamesfoster/knockout.observableDictionary但我仍然希望绑定没有额外的库

Answer 1

使用Knockout.js可以更轻松地绑定到键值对.假设您有一个键值对,如下所示

myItems: [
            { Name: 'Item 1', Value: 1},
            { Name: 'Item 3', Value: 3},
            { Name: 'Item 4', Value: 4}
        ],

只需使用以下html绑定到键值对.

<select data-bind="options: myItems, optionsText: 'Name', optionsValue: 'Value'></select>

参考文献:

http://knockoutjs.com/documentation/options-binding.html

Answer 2

尝试这样的事情:

<ul data-bind="keyvalue: properties">
    <li>
        <span data-bind="text: key"></span> :
        <span data-bind="text: value"></span>
    </li>
</ul>

对于JavaScript:

function AppViewModel() {
    this.properties = { b: 'c', d: 'e' };
}

ko.bindingHandlers['keyvalue'] = {
    makeTemplateValueAccessor: function(valueAccessor) {
        return function() {
            var values = valueAccessor();
            var array = [];
            for (var key in values)
                array.push({key: key, value: values[key]});
            return array;
        };
    },
    'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers['foreach']['init'](element, ko.bindingHandlers['keyvalue'].makeTemplateValueAccessor(valueAccessor));
    },
    'update': function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        return ko.bindingHandlers['foreach']['update'](element, ko.bindingHandlers['keyvalue'].makeTemplateValueAccessor(valueAccessor), allBindings, viewModel, bindingContext);
    }
};

ko.applyBindings(new AppViewModel());

Answer 3

我认为你应该这样做

\n\n

<ul data-bind="foreach: personal">\n  <li data-bind=" text: country"></li>\n  <li data-bind=" text: name"></li>\n</ul>\xe2\x80\x8b\n\n// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI\nfunction AppViewModel() {\n    // Use an array here\n    this.personal = [{\n        "name": "Loek",\n        "country": "Netherlands"\n    }];\n}\n\n// Activates knockout.js\nko.applyBindings(new AppViewModel());\xe2\x80\x8b\n

\n\n

小提琴http://jsfiddle.net/Aw5hx/

\n\n

PS 在这篇文章之前我从未使用过 knockoutJS，所以我不是世界专家。

\n