Question

这是我的数据集：

＆＃13;

dataSource: [
    {
        title: "Test",
        start: new Date("2015/6/13 6:00"),
        end: new Date("2015/6/13 7:30"),
        availableServices: [1]
    }
],
resources: [
    {
        field: "availableServices",
        title: "Available Services",
        dataSource: [
            { value: 1, text: "On Demand", color: "#e6f1df" },
            { value: 2, text: "Patient Scheduled", color: "#f1e2ed" },
            { value: 3, text: "Admin Scheduled", color: "#fef1de" },
            { value: 4, text: "Unavailable/Blocked", color: "#c6c3c3" }
        ],
        multiple: true
    }
]

＆＃13;

这是我的自定义模板：

＆＃13;

<script id="block-template" type="text/x-kendo-template">
    <div class="event-block  #if(availableServices=='On Demand'){# on-demand #}else{# meep #}#" >
        <p>
            #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
        </p>
        <span>
            #: title #
        </span>
        <span>
            #: availableServices #
        </span>
    </div>
</script>

＆＃13;

输出的是：

＆＃13;

<div class="event-block   meep ">
    <p>
        06:00 - 07:30
    </p>
    <span>
        Test
    </span>
    <span>
        [object Object]
    </span>
</div>

＆＃13;

所以，我试图在包含div中添加一个类的部分基于哪个＆＃34;可用服务＆＃34;字段被选中，不起作用。它只是输出了else选项＆＃34; meep＆＃34;无论如何。

我试图列出哪些＆＃34;可用服务＆＃34;在内容区域中选择的字段也不起作用 - 它只是输出＆＃34; [object Object]＆＃34;

非常感谢任何帮助！

Answer 1

这是你如何做到的，你需要将条件更改为像这样的一个，就像一个数组

#if(availableServices[0]==1){#on-demand#}else{#meep#}#

这是模板代码：

<script id="block-template" type="text/x-kendo-template">
<div class="event-block #if(availableServices[0]==1){#on-demand#}else{#meep#}#">
    <p>
        #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
    </p>
    <span>
       title : #: title #,
    </span>
    <span>
       available services : # for(var i=0, length = availableServices.length; i<length; i++){# #: availableServices[i]# #} #
    </span>
</div>

JS代码：

$("#scheduler").kendoScheduler({
  date: new Date("2015/6/13"),
  eventTemplate: $("#block-template").html(),
  dataSource: [
    {
        title: "Test 1",
        start: new Date("2015/6/13 6:00 AM"),
        end: new Date("2015/6/13 7:30 AM"),
        availableServices: [1,2]
    },
    {
        title: "Test 2",
        start: new Date("2015/6/13 7:00 AM"),
        end: new Date("2015/6/13 8:30 AM"),
        availableServices: [2,3,4]
    }
  ],
  resources: [
    {
        field: "availableServices",
        title: "Available Services",
        dataSource: [
            { value: 1, text: "On Demand", color: "#e6f1df" },
            { value: 2, text: "Patient Scheduled", color: "#f1e2ed" },
            { value: 3, text: "Admin Scheduled", color: "#fef1de" },
            { value: 4, text: "Unavailable/Blocked", color: "#c6c3c3" }
        ],
        multiple: true
    }
  ]
});

DEMO

引用Kendo Scheduler的自定义事件模板中的字段

1 个答案: