剔除条件为“未绑定"的选项元素的样式. SELECT元素 [英] Knockout conditional styling of the option elements of an "unbound" SELECT element

问题描述

我的页面上的各种输入都是​​通过敲除绑定到视图模型的，例如客户记录.一切都很好.

The various inputs on my page are bound via knockout to a view model, let's say a customer record. That's all working fine.

现在，我想在页面顶部放置一个SELECT，其中包含所有客户列表.用户将选择一个客户，将从数据库中获取记录，并将数据绑定到视图模型.

Now, I want to put a SELECT at the top of the page that contains a list of all customers. The user will pick a customer, the record will be fetched from the database, and the data will be bound to the view model.

我的问题涉及该SELECT列表中项目的条件样式.它将绑定到一系列客户对象.客户对象定义具有名为 hasExpired 的功能:

My question concerns conditional styling of the items in that SELECT list. It will be bound to an array of customer objects. The Customer object definition has a function called hasExpired:

   var Customer = function (id, name, expiryDate) {
    this.id = id;
    this.customerName = name;
    this.expiryDate = expiryDate;
    this.hasExpired =  function() {
        return this.expiryDate == null ? false : true; 
      };
    };

页面输入绑定到的ViewModel看起来像这样:

The ViewModel, to which the inputs on the page are bound, looks like this:

      function ViewModel() {
            var self=this;
             self.customerRegion = ko.observable(),
             self.customerName = ko.observable(),
             .
             .
             .
             self.allCustomers = Customers,  // Customers is an array of Customer objects
             self.selectedCustomer = ko.observable()



     }

此剔除绑定有效； SELECT正确填充了客户列表:

This knockout binding works; the SELECT is correctly populated with the list of customers:

    <select id="customerSelect" 
             data-bind="options: allCustomers,
            optionsText: 'customerName', 
            value:   selectedCustomer />

我想为各个OPTIONS设置样式，并在适当时添加一个"expired"类.

I want to style the individual OPTIONS, adding an "expired" class if appropriate.

客户选择"中的各个项目未绑定到视图模型. SELECT功能类似于导航菜单.这些选项绑定到allCustomers数组中的客户对象.

如何告诉敲除对象咨询绑定到每个OPTION的客户对象的hasExpired属性，以确定该特定选项是否应获得expired属性?

How to tell knockout to consult the hasExpired property of the customer object bound to each OPTION, to determine whether that particular option should get the expired property?

我希望客户保留在选择"列表中，但要以删除线格式显示.

I want the customer to remain in the Select list but to appear with strike-through formatting.

SELECT是否需要自己的视图模型?

Does the SELECT require its own view model?

推荐答案

选项绑定具有参数(optionsAfterRender)，该参数允许对options元素进行附加处理.请参见注释2:对生成的选项进行后处理(通过链接的文档).

The options binding has a parameter (optionsAfterRender) that allows for additional processing of the options elements. See Note 2: Post-processing the generated options (via the linked documentation).

除非我对您的数据模型的结构有误解，否则只需做一个回调

Unless I have misinterpreted the structure of your data models, all that is required is a callback

self.setOptionStyling = function(option, item) {
   ko.applyBindingsToNode(option, {css: {expired: item.hasExpired()} }, item);
}

绑定到optionsAfterRender参数:

<select id="customerSelect" 
        data-bind="options: allCustomers,
                   optionsText: 'customerName', 
                   value: selectedCustomer,
                   optionsAfterRender: setOptionStyling" />

expired css类定义为:

.expired {
   text-decoration: line-through;
}

这篇关于剔除条件为“未绑定"的选项元素的样式. SELECT元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！