Dojo 在 MVC 局部视图中不起作用答案

【问题标题】：Dojo doesn't work in MVC Partial ViewDojo 在 MVC 局部视图中不起作用
【发布时间】：2016-06-11 04:45:14
【问题描述】：

我有一个局部视图：

<div id="AgreementBox@(ViewData["UniqueId"])" class="agreement-box">
    <span>
        I read agreement
    </span>
    <a>
        terms of usage
    </a>
</div>

<script>
    require([
    'dojo/dom',
    "dijit/form/CheckBox",
    "dojo/dom-construct",
    "dojo/ready"],
function (dom@(ViewData["UniqueId"]), checkbox@(ViewData["UniqueId"]), construct@(ViewData["UniqueId"]), ready@(ViewData["UniqueId"])) {
    ready@(ViewData["UniqueId"])(function () {
        agreecheckbox@(ViewData["UniqueId"]).placeAt(dom@(ViewData["UniqueId"]).byId("AgreementBox@(ViewData["UniqueId"])"), "first");
    });
    var agreecheckbox@(ViewData["UniqueId"]) = new checkbox@(ViewData["UniqueId"])(
        {
            id: "IAgreeToTermsOfUse@(ViewData["UniqueId"])",
            name: "iagreetotermsofuse@(ViewData["UniqueId"])",
            class: "i-agree-checkbox",
            checked: false
        });
});
</script>

我在每个表单下都使用这个视图（每个表单都有一个唯一的 id，我将其用作 ViewData["UniqueId"]）：

@Html.Partial("../MyPartialView", new ViewDataDictionary { { "UniqueId", "Order" } })

当这个视图每页出现一个时，它可以工作，但是当它出现更多时，复选框不会出现在页面上。我没有收到任何错误，并且在 chrome 调试器中代码有效！

生成的输出：

<div id="AgreementBoxContact" class="agreement-box">
    <span>
        I read agreement
    </span>
    <a>
        terms of usage
    </a>
</div>
<script>
    require([
    'dojo/dom',
    "dijit/form/CheckBox",
    "dojo/dom-construct",
    "dojo/ready"],
function (domContact, checkboxContact, constructContact, readyContact) {
    readyContact(function () {
        agreecheckboxContact.placeAt(domContact.byId("AgreementBoxContact"), "first");
    });
    var agreecheckboxContact = new checkboxContact(
        {
            id: "IAgreeToTermsOfUseContact",
            name: "iagreetotermsofuseContact",
            class: "i-agree-checkbox",
            checked: false
        });
});
</script>
//
//on the same html page
//
<div id="AgreementBoxOrder" class="agreement-box">
    <span>
        I read agreement
    </span>
    <a>
        terms of usage
    </a>
</div>
<script>
    require([
    'dojo/dom',
    "dijit/form/CheckBox",
    "dojo/dom-construct",
    "dojo/ready"],
function (domOrder, checkboxOrder, constructOrder, readyOrder) {
    readyOrder(function () {
        agreecheckboxOrder.placeAt(domOrder.byId("AgreementBoxOrder"), "first");
    });
    var agreecheckboxOrder = new checkboxOrder(
        {
            id: "IAgreeToTermsOfUseOrder",
            name: "iagreetotermsofuseOrder",
            class: "i-agree-checkbox",
            checked: false
        });
});
</script>

请帮我找出发生这种情况的原因！

【问题讨论】：

尝试用dojo/domReady!替换dojo/ready
我试过了，结果还是一样。
不确定它是如何工作的。是一个表单下的多个复选框还是多个表单下的一个复选框？
一个复选框跨越多个表单
你能分享生成的输出（浏览器收到的最终 html）吗？

标签： javascript asp.net-mvc checkbox dojo

【解决方案1】：

终于找到答案了！我仍然不知道为什么我以前的代码不起作用。我稍微改了一下，现在效果很好！

<div id="AgreementBox@(ViewData["UniqueId"])" class="agreement-box">
    <span>
        I read agreement
    </span>
    <a>
        terms of usage
    </a>
</div>
}
<script type='text/javascript'>
    require([
    'dojo/dom',
    "dojo/dom-construct",
    "dojo/domReady!"],
function (dom@(ViewData["UniqueId"]), Create@(ViewData["UniqueId"])) {
    var checkbox@(ViewData["UniqueId"]) = Create@(ViewData["UniqueId"]).create("input", {
        type: "checkbox",
        id: "IAgreeToTermsOfUse@(ViewData["UniqueId"])",
        name: "iagreetotermsofuse@(ViewData["UniqueId"])",
        class: "i-agree-checkbox"
    });
    Create@(ViewData["UniqueId"]).place(checkbox@(ViewData["UniqueId"]), dom@(ViewData["UniqueId"]).byId("AgreementBox@(ViewData["UniqueId"])"), "first");
});
</script>

如果有人知道为什么我以前的代码不起作用，我会很高兴得到答案！我在这个问题上花了将近一个星期，我仍然不知道为什么会这样！

【讨论】：