在 Kendo 计划程序的自定义事件模板中引用字段

Question

这是我的数据集：

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
    }
]

这是我的自定义模板：

<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>

它输出的是：

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

因此，我尝试在 div 中添加 class 的部分基于选择 "Available Service" 字段，但该部分不起作用。它只是输出 else 选项 "meep" 无论如何。

我试图列出在内容区域中选择了哪些 "Available Service" 字段的部分也不起作用——它只是输出“[object Object]”

如有任何帮助，我们将不胜感激！

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 计划程序的自定义事件模板中引用字段

Referencing fields in a custom event template for Kendo Scheduler

kendo-ui

kendo-scheduler