更新模板中的文本

我一直在尝试使用基于下拉选项的某些文本更新x-kendo-template中的某些<label>元素。将网格导出为PDF时使用此模板。更新模板中的文本

网格初始化

var grid = $("#reportGrid").kendoGrid({       
    height: "auto", 
    pdf: {    
     template: kendo.template($("#page-template").html()), 
     ... other options for pdf export 
    },   
    ... other options for the grid 
});

HTML

<script type="text/x-kendo-template" id="page-template"> 
    <div>Catalogue Number: <span id="catalogueNumber_Report" data-bind="text: CatalogueNumber"></span></div> 
    <div>Lot Number: #: LotNumber #</div> 
    <div>Size: ${Size}</div> 
    <div style="display: table-cell; width: 25%;">Expiry: <label id="expiryDateLabel_Report"></label></div>  
</script>

JavaScript函数来更新文本

function assignLotDetailLabels(selectedItem) {  
    var viewModel = kendo.observable({ 
     LotNumber: selectedItem.LotNumber, 
     CatalogueNumber: selectedItem.CatalogueNumber, 
     Size: selectedItem.Size 
    }); 
    kendo.bind($("#page-template"), viewModel); 
    $('#expiryLabel_Report').text(selectedItem.ExpiryDate); 
}

迄今为止，以上都不适用于我（标签中没有填充关联的字段）。有没有不同的方式我应该这样做？

编辑

改变HTML访问data属性返回undefined，而不是仅仅是空的，如果这是任何指示，我缺少的是什么？

HTML

<script type="text/x-kendo-template" id="page-template"> 
    <div>Catalogue Number: #: data.CatalogueNumber #</div> 
    <div>Lot Number: #: data.LotNumber #</div> 
    <div>Size: #: data.Size #</div> 
    <div>Expiry: #: data.ExpiryDate #</div> 
</script>

的Javascript

var viewModel = kendo.observable({ 
     LotNumber: selectedLot.LotNumber, 
     CatalogueNumber: selectedLot.CatalogueNumber, 
     Size: selectedLot.Size 
    }); 
    kendo.bind($("#page-template"), viewModel);

此外，有没有办法来调试HTML查看什么data是什么？

来源

2017-05-09 Sandman

原来我选择2（#: LotNumber #）并不太远，但是我没有引用Javascript viewModel变量。此外，viewModel变量需要具有默认值的全局范围，并且在需要时，其中的属性应为set()。

例

HTML模板：

<div>Lot Number: #: viewModel.LotNumber #</div>

视图模型声明为一个全局变量：视图模型的assignLotDetailLabels

var viewModel = kendo.observable({ 
    LotNumber: 0, 
    CatalogueNumber: 0, 
    Size: "S", 
    ExpiryDate: new Date() 
});

套装属性：

function assignLotDetailLabels(selectedItem) { 
    viewModel.set("LotNumber", selectedItem.LotNumber); 
    // all the rest of the properties to set  
}

最后但并非最不重要的是，可以通过使用模板内的控制台输出来查看viewModel变量的内容# console.log(viewModel) #

来源

2017-05-11 09:36:00 Sandman

更新模板中的文本

回答

相关问题