Javascript 更新模板中的文本

我一直在尝试使用一些基于下拉选择的文本来更新

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>

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

到目前为止，上面的所有内容都不适用于我（没有任何标签填充了相关字段）。有没有其他方法可以让我这样做

编辑

更改

HTML

以访问

数据

属性会返回

未定义

，而不是仅为空，如果这是我缺少的任何指示

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>

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

---

另外，是否有一种调试HTML的方法来查看

数据是什么？
结果表明，我对选项2（
：LotNumber
）没有太多的了解，但是我没有引用Javascript
viewModel
变量。此外，
viewModel
变量需要具有默认值的全局作用域，其中的属性应在需要时设置为
set（）

示例

HTML模板：

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

在
assignLotDetailLabels
中设置viewModel的属性：

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

最后但并非最不重要的一点是，通过使用模板
#console.log（viewModel）#
中的控制台输出，可以查看
viewModel
变量的内容，但我没有引用Javascript
viewModel
变量。此外，
viewModel
变量需要具有默认值的全局作用域，其中的属性应在需要时设置为
set（）

示例

HTML模板：

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

在
assignLotDetailLabels
中设置viewModel的属性：

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

最后但并非最不重要的一点是，可以使用模板
#console.log（viewModel）#