将属性添加到使用映射插件映射的 ko 模型答案

【问题标题】：Add attribute to ko model which mapped using mapping plugin将属性添加到使用映射插件映射的 ko 模型
【发布时间】：2014-01-08 00:01:46
【问题描述】：

我在淘汰赛 js 中为映射对象添加了新属性。我可以访问表中添加的属性。但是当我将对象加载到另一个视图时，它不会显示添加的属性，但我可以访问该 UI 中的映射属性

function Ticket(jsTicket){
   var self = this;
   ko.mapping.fromJS(jsTicket, {}, this);
   this.company = "Gover";
   this.formattedDate = moment(self.date(),"YYYY-MM-DDTHH:mm:ss").format("MM-DD HH:MM");
   //This method call to another page, I could access js attribute in that UI but 
   // couldn't access manually added attributes,what would be the solution to this
   this.getRunTicket = function(){
     servicet.getTicket(self);
   }
}

html页面

<div data-role="page" id="rticketDetailsPage" data-theme="b">
       <div data-role="content" data-theme="b" data-position="fixed">
           <!-- mapped attribute from JS --> 
           <p>NO : <span data-bind="text: ticketNumber()"></p>
           <!-- Manually added attributes -->    
           <p>Date : <span data-bind="text: formattedDate()"></p>
           <p>Company : <span data-bind="text: company()"></p>
       </div>
   </>

Data grid Model

function DataGrid(){
    var self = this;
    self.dataGrid = ko.observableArray();

    self.addTicketToGrid = function(ticket){
        self.dataGrid.push(ticket);
    }
}

数据网格 html

<tbody data-bind="foreach : dataGrid">
      <tr>
        <td><span data-bind="text : number(),click: getTicket"></span></td>
        <!-- formatted date is manually added attribute,displays in grid-->
        <td><span data-bind="text : formattedDate()></span></td>
        <td><span data-bind="text : operatorName()"></span></td>
      </tr>
</tbody>

为什么我无法在该范围内访问手动添加的属性？

提前谢谢你

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

company 和 formattedDate 不是 observables，但您正试图像访问它们一样访问它们。它们是纯字符串，但您的绑定尝试将它们称为函数。

【讨论】：

【解决方案2】：

向映射对象添加属性的方式是通过映射定义中的create 函数（ko.mapping.fromJS 的第二个参数）。

var mapping = {
    create: function(opts) {
        var result = ko.mapping.fromJS(opts.data);
        result.company = ko.observable("Gover");
        return result;
    }
};

然后在你的 Ticket 构造函数中

ko.mapping.fromJS(jsTicket, mapping, this);

这应该有助于解决您的问题，因为该对象现在将始终具有其他属性。

另一条建议是使用自定义绑定或至少计算值来格式化表格中的日期。

【讨论】：