Question

我在开发应用程序时有一个场景。我有一个名为MyImage的对象：

function MyImage(imgUrl,id){
   this.ImageUrl = ko.observable(imgUrl);
   this.Id = ko.observable(id);
   this.Attributes = ko.observableArray([]);

   var theWidth = new TheAttributes(0,'width','120px');
   this.Attributes().push(theWidth);

   var theHeight = new TheAttributes(0,'height','120px');
   this.Attributes().push(theHeight );
}

最终用户可以在Attributes数组中添加很多css属性，属性定义为：

function TheAttributes(id,attName,attValue)
{
   this.Id = ko.observable(id);
   this.AttName = ko.observable(attName);
   this.AttValue = ko.observable(attValue);
}

最终用户将拥有一个图像列表，他/她可以通过单击选择一个图像，一旦选择了图像，用户就可以编辑其信息和属性。目前我想要做的就是：

<div data-bind="with: $root.SelectedImage">
    Image File selection controls and than
    <ul data-bind="foreach: Attributes">
        <!-- ko if: AttName == 'width' -->
        <li>Show label and text field for width</li>
        <!-- /ko -->
        <!-- ko if: AttName == 'height' -->
        <li>Show label and text field for height</li>
        <!-- /ko -->
        <!-- ko if: AttName == 'backgroundColor' -->
        <li>Show label and Dropdown field for color selection</li>
        <!-- /ko -->
    </ul>
</div>

我想问一下这是否是正确的方法，还是有更好的选择，并且在淘汰中有任何“where”子句可用的机制，以便我可以维护字段序列。

Answer 1

我不会将这个逻辑放在你的模板中。相反，我会在视图模型中创建可用属性列表：

<div data-bind="with: $root.SelectedImage">
    Image File selection controls and than
    <ul data-bind="foreach: Attributes">
        <!-- ko if: AvailableAttributes[AttName] -->
            <li data-bind="text: AvailableAttributes[AttName]"></li>
        <!-- /ko -->
    </ul>
</div>

因此，您可以在模板中执行以下操作：

Attributes

要维护序列，您可以编写一个计算值，根据AvailableAttributes的顺序对{{1}}进行排序。

knockoutjs中的where子句可用？

1 个答案: