Question

在过去2年多的时间里与AngularJS合作并开始进入MeteorJS 1.2目前，火焰模板层的某些方面对我来说感觉非常不直观，但可能有一个简单的解决方案。

我希望有一个＆＃34;创建民意调查＆＃34;表格包含以下字段：

问题，文字字段
民意调查选项，文字字段
添加选项，按钮
选项列表，<li>基于本地options数组的转发器
列表项目有一个删除按钮

本质上我希望能够填充民意调查选项字段，点击＆＃34;添加选项＆＃34;并以只读方式（纯文本）在轮询选项文本字段下方的列表转发器中呈现此选项。

我目前的问题是，如果不使用ReactiveArray之类的东西，当我在本地数组变量options中推送项目时，blaze模板不会重新渲染。

解决这个问题的正确方法是什么？

以下代码：

poll.create.html模板：

<template name="pollCreate">
    <form class="form form--create">
        <section class="form__section">
            <!-- Question Field -->
            <input class="form__field" type="text" name="question" required>

            <!-- Poll Options -->
            <ul class="form__list">

                <!-- Poll option form field -->
                <li class="form__list-item form__list-item--creator">
                    <input class="form__field" type="text" name="pollOption">
                    <button class="form__button--add" type="button">&plus;</button>
                </li>

                <!-- Render the options added above -->
                {{#each option in optionList}}
                <li class="form__list-item--option" data-index="{{option.index}}">
                    <span class="form__list-item-value">{{option.label}}</span>
                    <button type="button" class="form__button--delete">&times;</button>
                </li>
                {{/each}}
            </ul>
        </section>

        <button class="form__button--submit" type="submit">Create Poll</button>
        <button class="form__button--reset" type="reset">Clear Fields</button>
    </form>
</template>

poll.create.client.js（Polls = new Mongo.Collection("polls")在服务器文件中）

// Setup
Template.pollCreate.onCreated(function () {

    // Local poll variable to capture the options in.
    this.options = [
        { index: 0, label: 'BurgerBurger' },
        { index: 1, label: 'BetterBurger' }
    ];

});

// Events
Template.pollCreate.events({
    /**
     * Adds an option to the local array for saving as part of the submit in the Posts.insert call.
     * @param event
     * @param instance
     */
    'click .form__button--add': function ( event, instance ) {
        event.preventDefault();

        // Get current option element
        var option = instance.find('[name="pollOption"]');

        // Store in a local array
        instance.options.push({
            index: instance.options.length,
            label: option.value
        });

        // Clear field so it's ready for another option
        option.value = '';
    },
    /**
     * Delete an existing option.
     * @param event
     * @param instance Template.instance
     */
    'click .form__button--delete': function ( event, instance ) {
        event.preventDefault();

        var listItemElement = event.target.parentNode;
        var itemIndex = instance.$(listItemElement).data('index');

        // Delete option from reactive source array
        instance.options.splice(itemIndex, 1);
    },
    /**
     * Submit the Poll Create form which will run Polls.insert with the question and options
     * @param event
     * @param instance
     */
    'submit .form--create': function ( event, instance ) {
        event.preventDefault();

        var question = instance.find('[name="question"]');
        var options = instance.options;

        var poll = {
            question: question.value,
            options: options
        };

        Polls.insert(poll);
    }
});

// Helpers
Template.pollCreate.helpers({
    optionList: function () {
        const instance = Template.instance();
        return instance.options;
    }
});

我可以看到instance.options数组值在我推入或拼接选项时会发生变化，但它似乎没有重新渲染模板，选项列表也不会改变。

我在这里做错了什么？

Answer 1

每当你想要ui进行反应性更新时，你需要有两件事，（1）反应数据源和（2）反应性上下文。

现在你已经获得了被动上下文 - 这是模板助手optionList，它会在其引用的被动数据源发生变化时重新呈现。问题是选项列表不是一个被动数据源，它只是一个vanilla数组。因此，当Templace.instance().options数组发生更改时，帮助程序无法重新呈现它。

修复非常简单 - 只需使用Meteor的内置反应结构Template.instance.options或ReactiveVar或使用{{1}，使ReactiveDict成为反应数据源}}。你提到的MiniMongo也会起作用 - 我相信这个社区是维护的，而不是核心包，但它的想法是一样的。

这里最快捷，最简单的解决方案是将整个数组保存到一个ReactiveArray：

ReactiveVar

应该这样做。

当局部阵列发生变化时如何重新渲染流星火焰模板？

1 个答案: