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

时间:2014-01-08 00:01:47

标签: knockout.js knockout-mapping-plugin

我已经在knockout 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 page

<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>

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

提前谢谢

2 个答案:

答案 0 :(得分:1)

companyformattedDate不是observable,但您尝试访问它们,就像它们一样。它们是简单的字符串,但是你的绑定试图将它们称为函数。

答案 1 :(得分:1)

您应该将属性添加到映射对象的方式是通过映射定义上的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);

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

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