javascript - 更新模板内的文本

Question

我一直在尝试更新一些<label> 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
});       

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

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()
});

在assignLotDetailLabels中设置viewModel的属性:

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

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