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) #变量的内容

更新模板中的文本

1 个答案: