KnockoutJS-在可观察数组中绑定属性ob对象

Question

function OutletsView(){
  self = this;
  self.locations = ko.observableArray(<?php echo json_encode($locations); ?>);
}

ko.applyBindings(new OutletsView());

位置结构

[
{
  name: 'Demo',
  oid: 1,
  children: [
    {
      id: 2,
      name: 'de'
    },
    {
      id: 2,
      name: 'de'
    }
  ]
},
{
  name: 'Demo',
  oid: 1,
  children: [
    {
      id: 2,
      name: 'de'
    },
    {
      id: 2,
      name: 'de'
    }
  ]
}
]

我需要绑定oid并在html中进行更改

<script type="text/html" id="location-filter">
    <div>
        <div data-bind="text: oid"></div>
        <div>
            <ul data-bind="foreach: locations">
                <li data-bind="text: name, click: $parent.applyFilter(id, name, $parent)"></li>
            </ul>
        </div>
    </div>
</script>

因此，我想更改oid，但找不到人可以如何帮助我？

编辑：

function OutletsView(){
        self.locations = ko.observableArray([]);
        self.getChildLocations = function(id){
            $.post('<?=$this->url(array('controller' => 'location', 'action' => 'get-locations'), 'default', true); ?>',
                {id: id},
                function(data){
                    var parsed = $.parseJSON(data);
                    var item = new Location(parsed);
                    self.locations.push(item);
                }
            );
        }
    }
    function locationItem(el){
        tself = this;
        tself.id = el.id;
        tself.name = el.name;
        tself.lo_idx = el.lo_idx;
        tself.cls = ko.observable(el.cls);
    }

    function Location(item){
        kself = this;
        kself.using_id = 0;
        kself.using_name = item[0].location_type;
        kself.cls = ko.observable('jcsik jactive jsminimize');
        kself.locations = [
            new locationItem({id: 0, name: item[0].location_type, lo_idx: 0, cls: ''}),
            new locationItem({id: 1, name: 'Не выбрано', lo_idx: 0, cls: 'jexpand'})

        ];
        $.each(item, function(i, el){
            kself.locations.push(new locationItem(el));
        });
        kself.getLocation = function(){
            return kself;
        }
    }

Answer 1

您在foreach循环外绑定oid属性，这会导致中断。

您可以更改方法并执行类似的操作

<script type="text/html" id="location-filter">


        <div>
            <ul data-bind="foreach: locations">
                <li>
                   <span data-bind="text: oid"></span> : 
                   <span data-bind="text: name, click: $parent.applyFilter(id, name, $parent)"></span>
                </li>

            </ul>
        </div>
    </div>
</script>

Answer 2

首先，您的oid在foreach循环之外，因此绑定此时无法访问它；其次，如果您想从js更新oid，则它必须是可观察的

两种选择。

1. 使用ko.mapping插件将属性转换为可剔除的可观察对象

   功能OutletsView（）{self = this; self.locations = ko.observableArray（ko.mapping.fromJS（））; }

您将需要引用ko.mapping.js插件，其缺点是它将所有属性都转换为ko属性

1. 创建您自己的转换方法以转换您要观察的属性。

像这样的东西

function OutletsView(){
  self = this;
  self.locations = ko.observableArray(toKO(<?php echo json_encode($locations); ?>));
}

function toKO(arr){
    var retObj = []
    for(var i = 0; arr.length, i++){
       retObj.push([
         name: ko.observable(arr[i].name)
         oid: ko.observable(oid);
         /// and on and on
       });
   }
   return retObj;
}