5

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しかし、追加のライブラリなしでバインドしたいと思っています

4

4 に答える 4

6

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

于 2013-08-23T19:27:58.700 に答える
5

次のようなことを試してください：

<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());
于 2013-08-21T03:03:36.580 に答える
2

やるべきだと思います

<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を使用したことがないので、私は世界の専門家ではありません.

于 2012-06-15T13:58:33.280 に答える