2

私は次のモデルを持っています：

var simpleModel = function(){
    var self = this;   
    self.name = "Simple model";
    self.attributes = {  
        attr1: ko.observable("1"),
        attr2: ko.observable("2"),
        attr3: ko.observable("3")
    };
}

attributesこのモデルのプロパティを列挙し、キーと値を次のように表示できるようにしたいと思います。

<div>
   <span>attr1</span><span>1</span>
   <span>attr2</span><span>2</span>
   <span>attr3</span><spam>3</span>
</div>

オブジェクトで使用されたときのjavascriptのforループ動作に基づいてこれを解決しようとしましたが、失敗しました:

<div data-bind="foreach: { data: designAttributes, as: 'dAttr' }">
   <span data-bind="text: $index"></span>
   <span data-bind="text: dAttr[$index]"></span>
</div>
4

3 に答える 3

1

カスタム バインディング:

<div data-bind="createSpan">

ko.bindingHandlers.createSpan =
{
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        for(var item in valueAccessor())
        {
            $(element).append('<span data-bind="text:' + valueAccessor()[item] + '"></span>');
        });
    }
};
于 2013-03-07T19:22:17.497 に答える
1

残念ながら foreach は配列用にのみ作成されているため、オブジェクトを配列に変換する関数が必要です。jsフィドル

window.objToArray = function (obj) {
    var result = [];
    for (var i in obj) {
        result.push({ key: i, value: obj[i]});
    }
    return result;
};

それらをバインディングで使用します。

<ul data-bind="foreach: window.objToArray(items)">
于 2013-03-07T19:22:25.777 に答える
1

計算されたオブザーバブルを使用して、必要な構造を取得し、それにバインドします。私は自由にあなたの JS を変更し、self.attributes を観察可能にしました。

ここにフィドルがあります。

http://jsfiddle.net/sujesharukil/A846H/

var simpleModel = function(){
var name = 'Simple model',
    attributes = ko.observable({
        attr1: ko.observable('1'),
        attr2: ko.observable('2'),
        attr3: ko.observable('3')
    }),
    splitAttributes = ko.computed(function(){
        var splitAttribs = [];
        for(var attr in attributes()){
            splitAttribs.push({
                name: attr,
                val: attributes()[attr]
            });
        }

        return splitAttribs;
    }),
    vm = function(){};

    vm.name = name;
    vm.attributes = splitAttributes;

    return vm;


}

ko.applyBindings(new simpleModel());

そして、これがその HTML バインディングです。

<div data-bind="foreach: attributes">
    <span data-bind="text: name"></span> = <span data-bind="text: val"></span> <br/>
</div>

それがあなたが探しているものであることを願っています。

乾杯！スジ

于 2013-03-07T20:24:57.537 に答える