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

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

1 个答案: