在模板中更新文本

Question

我一直试图使用一些基于下拉选择的文本更新x-kendo-template中的一些x-kendo-template元素。此模板在将网格导出到PDF时使用。

网格初始化

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

<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，而不是仅为空--如果这表明了我所缺少的内容？

<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是什么？

Answer 1

结果，我在选项2 (#: LotNumber #)上没有太远，但是我没有引用Javascript viewModel变量。此外，viewModel变量需要具有默认值的全局范围，并且在需要时，其中的属性应该是set()。

示例

HTML模板：

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

viewModel声明为全局变量：

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

viewModel在assignLotDetailLabels中的集合属性

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

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