templates - KendoUI：使用外部变量渲染模板

Question

我正在通过 AJAX 加载一些东西，并通过 kendo 渲染它，但想添加一些不在 AJAX 加载的数据中但在 js 中设置为 var 的东西，如下所示：

<script id="some-template" type="text/x-kendo-template">
    <div style="background-image: url('#= commonBackground #');">
        <h2>#= title #</h2>
    </div>
</script>

然后调用这个：

$('button').on('click', function(e){
    e.preventDefault();

    var commonBackground = '/images/background.png';
    var someData = {
        title: 'Lorem Ipsum'
    };
    var someTemplate = kendo.template($('some-template').html());

    $('#target').append(someTemplate(someData));
});

现在我知道这是可怕的代码，但我希望我能理解我在这里尝试做的事情。我不确定我应该如何commonBackground从我的模板中引用，对此有什么帮助吗？文档并没有让我变得更聪明......

Answer 1

您的变量commonBackground必须是全局的。

要么将其定义为：

var commonBackground = '/images/background.png';
$(document).ready(function () {
    ...
});

或者：

var commonBackground = undefined;
$(document).ready(function () {
    ...
    $('button').on('click', function(e){
        ...
        commonBackground = '/images/background.png';
        ...
    });
});

重要提示：为什么没有commonBackground在模板数据中按原样定义title？我认为这样做更容易/更清洁：

$('#button').on('click', function (e) {
    e.preventDefault();
    var someData = {
        title           : 'Lorem Ipsum',
        commonBackground: 'background.png'
    };
    var someTemplate = kendo.template($('#some-template').html());
    $('#target').append(someTemplate(someData));
});