Question

我正在尝试使用KnockoutJS绑定到键/值对数据：

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

在我的HTML中，我使用$ data binding：

<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>

这导致以下输出：

姓名：Loek
国家：荷兰

Here's a fiddle with a working example.

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/

P.S。我从未在这篇文章之前使用过淘汰赛，所以我不是世界专家。

KnockoutJS绑定到Key / Value对

4 个答案: