Почему подстановка переменных не работает для моего случая?

Question

Я пытаюсь создать собственный виджет с использованием шаблонов, но замена переменных, похоже, не работает для меня.

Я вижу, как значение свойства обновляется внутри виджета, но DOM не изменяется. Например, когда я использую метод get (), я вижу новое значение свойства виджета. Однако DOM никогда не меняет своего значения.

Вот мой шаблон:

<div class="outerContainer">
    <div class="container">
        <span class="mySpan">My name is ${name}</span>
    </div>
</div>

Теперь вот мой код виджета:

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!/templates/template.html",
], function (declare, _WidgetBase, _TemplatedMixin, template) {
    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: template,
        name: "",

        constructor: function (args) {
            console.log("calling constructor of the widget");
            this.name = args.name;
        },

        startup: function() {
            this.inherited(arguments);
            this.set("name", "Robert");  // this does not work
        },

        postCreate: function() {
            this.inherited(arguments);
            this.set("name, "Robert");   // this does not work either
        },

        _setNameAttr: function(newName) {
            // I see this printed in the console.  
            console.log("Setting name to " + newName);
            this._set("name", newName);

            // I also see the correct value when I get()
            console.log(this.get("name"));  // This prints Robert
        }
    });
});

Я ожидал, что узел DOM скажет «Меня зовут Роберт», то есть новое значение, но оно никогда не обновляется. Вместо этого он читает «Меня зовут». Он не перезаписывает значение по умолчанию.

Я уверен, что где-то упускаю глупый шаг, но может кто-нибудь помочь мне разобраться, что?

Answer 1

Вы должны привязать свойство к этой точке в дом.Таким образом, вам нужно будет изменить шаблон следующим образом:

<span class="mySpan">My name is <span data-dojo-attach-point='nameNode'></span></span>

И в вашем виджете вы должны добавить эту функцию, чтобы связать его всякий раз, когда name изменяется:

 _setNameAttr: { node: "nameNode", type: "innerHTML" },

Теперь, когда name изменится, это изменит innerHTML из nameNode внутри вашего mySpan промежутка.Если вам нужно больше узнать об этой привязке, я рекомендую проверить документы .

Надеюсь, это поможет!