更新模板中的文本

我一直在嘗試使用基於下拉選項的某些文本更新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

更新模板中的文本

回答

相關問題