KnockoutJS绑定到键/值对

KnockoutJS binding to Key/Value pair

本文关键字：值对 绑定 KnockoutJS      更新时间：2023-09-26

>我正在尝试使用 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 但我仍然希望在没有额外库的情况下绑定

有一种更简单的方法使用 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

尝试这样的事情：

<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());

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

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>

这将产生以下输出：

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

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

我认为你应该这样做

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

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

相关文章：