Kendo布爾彈出窗口，帶有“是/否”組合

Question

這讓我發瘋。 我正在嘗試做應該不費吹灰之力的事情，但是有很多問題。 我有兩個布爾字段，我想綁定到帶有“是”和“否”的組合框。 我想使用Kendo UI組合框，而我正在Kendo UI網格的彈出模板中完成所有這些操作。

在下面的代碼段中，我有兩個選擇（在模板末尾），一個選擇了data-role =“ dropdownlist”，另一個沒有。

當您編輯用戶時，第一個選擇的ReceiveEmailMontlyFlyer將選擇正確的值，但不會更改應綁定的值。 第二個選擇ReceiveEmailMessages將不會選擇正確的值或返回正確的值。

請幫忙。 我肯定缺少一些非常簡單的東西，一些我不了解或不了解的有關HTML 5綁定或Kendo的規則。

<script id="popupEditorTemplate" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="Username" class="required">Username</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Username" data-bind="value:Username">

    <div class="k-edit-label">
        <label for="FirstName" class="required">First Name</label>
    </div>
    <input type="text" class="k-input k-textbox" name="FirstName" data-bind="value:FirstName">

    <div class="k-edit-label">
        <label for="LastName" class="required">Last Name</label>
    </div>
    <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">

    <div class="k-edit-label">
        <label for="Email" class="required">Email</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Email" data-bind="value:Email">

    <div class="k-edit-label">
        <label for="HomePhone">Home Phone</label>
    </div>
    <input type="text" class="k-input k-textbox" name="HomePhone" data-bind="value:HomePhone">

    <div class="k-edit-label">
        <label for="WorkPhone">Work Phone</label>
    </div>
    <input type="text" class="k-input k-textbox" name="WorkPhone" data-bind="value:WorkPhone">

    <div class="k-edit-label">
        <label for="MobilePhone">Mobile Phone</label>
    </div>
    <input type="text" class="k-input k-textbox" name="MobilePhone" data-bind="value:MobilePhone">

    <div class="k-edit-label">
        <label for="Line1" class="required">Address Line 1</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Line1" data-bind="value:Line1">

    <div class="k-edit-label">
        <label for="Line2">Address Line 2</label>
    </div>
    <input type="text" class="k-input k-textbox" name="Line2" data-bind="value:Line2">

    <div class="k-edit-label">
        <label for="ReceiveEmailMontlyFlyer">Receive Flyer</label>
    </div>

    <select name="ReceiveEmailMontlyFlyer" id="ReceiveEmailMontlyFlyer" data-bind="value:ReceiveEmailMontlyFlyer">
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>

    <div class="k-edit-label">
        <label for="ReceiveEmailMessages">Receive other</label>
    </div>
    <select id="ReceiveEmailMessages" name="ReceiveEmailMessages" data-bind="value:ReceiveEmailMessages" data-role="dropdownlist">
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>
    <br />
</script>

Answer 1

不知道這是否完全可以解決您的問題，但是您沒有關閉

<script>

這可能是有問題的

Answer 2

我前一陣子想通了，但從未在這里發布過。 因此，如果有人需要它，這就是我所發現的。

我在腳本標簽中創建了一個數據源，如下所示：

    var yesNoDropDownDataSource = new kendo.data.DataSource({
        data: [{ Value: "true", Text: "Yes" }, { Value: "false", Text: "No" }]
    });

然后，在彈出模板中按如下方式使用它：

    <div class="k-edit-label">
        <label for="ReceiveEmailMonthlyFlyer" class="required">Receive Flyer</label>
    </div>
    <input name="ReceiveEmailMonthlyFlyer"
        data-bind="value:ReceiveEmailMonthlyFlyer"
        data-value-field="Value"
        data-text-field="Text"
        data-source="yesNoDropDownDataSource"
        data-role="dropdownlist" />
    <br>