javascript - KnockoutJS 绑定到键/值对

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

在视图模型中创建一个函数，将对象属性名称和值转换为对象数组，其键和值属性包含上述名称和值。

var ExampleViewModel = function () {
    var self = this;

    self.personal = {
        "name": "Loek",
        "country": "Netherlands"
    };

    self.personalList = function () {
        var list = [];

        for (var i in self.personal) if (self.personal.hasOwnProperty(i)) {
            list.push({
                "key": i,
                "value": self.personal[i]
            });
        }

        return list;
    };
};

您的 html 模板应如下所示：

<ul data-bind="foreach: personalList()">
    <li data-bind="text: $data.key + ': ' + $data.value"></li>
</ul>

这将产生以下输出：

• 姓名：洛克
• 国家：荷兰

这是一个工作示例的小提琴。

Answer 4

我认为你应该这样做

<ul data-bind="foreach: personal">
  <li data-bind=" text: country"></li>
  <li data-bind=" text: name"></li>
</ul>​

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    // Use an array here
    this.personal = [{
        "name": "Loek",
        "country": "Netherlands"
    }];
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());​

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

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