问题描述

我想创建一个表，其中一列为空...该列中的单元格将由用户根据给定的信息填充。我正在使用x-editable库来使单元格可编辑。用户可以在空单元格中输入答案，也可以单击按钮说明他不想填充单元格（请参阅下面代码片段中带有id＃not-trying-quiz的按钮）。单击该按钮会自动使用正确的值填充单元格（使用Meteor.call获取方法）。

以下是为实现上述目标而编写的代码。当我运行应用程序时（或每当我刷新页面时），如果我单击按钮（带有id＃not-trying-quiz），表中的空单元格将填充正确的答案（如预期的那样）。

当我让页面保持原状一段时间后，问题就出现了。说，我让我的电脑睡觉，或者做一些完全不同的事情。经过一段时间的不活动后，当我回到页面时：

（1）我看到按下按钮时填写的答案（id＃not-trying-quiz）已不复存在了。刷新页面后，表列为空，控制台中出现以下错误（错误重复多次）

Exception from Deps afterFlush function: TypeError: Cannot read property 'parentNode' of null
    at LiveRange.containerNode (http://serverip:3000/packages/liverange.js?b3097d72d458e645fd4f0021c8ff5189abe8d98a:325:21)
    at LiveRange.findParent (http://serverip:3000/packages/liverange.js?b3097d72d458e645fd4f0021c8ff5189abe8d98a:670:45)
    at findParentOfType (http://serverip:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:138:19)
    at http://serverip:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:456:20
    at _.extend.flush (http://serverip:3000/packages/deps.js?eba25ec453bb70e5ae5c2c54192d21e0e4d82780:295:11)

（2）此外，现在当我按下按钮（带有id＃not-trying-quiz）时，我收到一个错误，表格列中没有填写正确答案。

Uncaught TypeError: Cannot read property 'parentNode' of null liverange.js:292
LiveRange.containerNode liverange.js:292
LiveRange.findParent liverange.js:637
findParentOfType spark.js:97
(anonymous function) spark.js:731
(anonymous function) listener.js:108
_.each._.forEach underscore.js:79
deliver listener.js:102
_.extend.handler

可能导致此行为的任何想法？这是一个流星虫吗？

相关代码

模板

<template name="Level1">

    Some material here.

    {{#constant}}

        <!-- the table is in the temlate Level2 -->
        {{> Level2}}

    {{/constant}}

</template>


<template name="Level2">
    <table class="table table-striped">
        {{#each records}}
            <tr>
                <td class="center">{{col1}}</td>
                <td class="center">
                    <a id="{{_id}}-col2" class="editable" data-col="col2">{{col2}}</a>
                </td>
                <td><i class="fa" id="{{_id}}-col2-icon"></i></td>
            </tr>
        {{/each}}
    </table>

    <div id="completeMsg">

        <button class="btn btn-warning btn-block" id="not-trying-quiz">No. I don't want to solve this. Let me just read further.</button>                

    </div>
</template>

模板Level2呈现代码

Template.Level2.rendered = () ->

    # Find all elements with class editable but without class editable-click
    # This finds all elements which x-editable has NOT MADE into editable objects.

    editableElems = this.findAll('.editable:not(.editable-click)')

    thisTmpl = this

    for elem in editableElems

        selElem = $(elem)

        qid = selElem.attr('id').split('-')[0]


        selElem.editable({

            type: 'number',

            emptytext: '??',

            params: {qid: qid, col: selElem.data().col},

            mode: 'inline',

            showbuttons: false,

            title: 'Enter your answer and press enter',

            url: (params) ->

                Meteor.call(
                    'gradeQuizQ',
                     params.qid, 
                     params.col, 
                     params.value,
                     'int',
                     (err, res) ->
                        if (!err)                            
                            if res is 1
                                $('#' + "#{params.qid}-#{params.col}-icon").addClass("fa-check right")
                                $('#' + "#{params.qid}-#{params.col}-icon").removeClass("fa-times wrong")
                                if ( thisTmpl.findAll( '.fa:not(.right)' ).length is 0 )
                                    Session.set('quizDone', 1)
                            else
                                $('#' + "#{params.qid}-#{params.col}-icon").addClass("fa-times wrong")
                                $('#' + "#{params.qid}-#{params.col}-icon").removeClass("fa-check right")
                ) 
        })

模板Level2事件

Template.Level2.events

    'click #not-trying-quiz': (evt, tmpl) ->
        evt.preventDefault()

        idsColumns = []

        $( tmpl.findAll('.fa:not(.right)') ).each( () ->
            idsColumns.push( id )
        )

        Meteor.call('getAnswersTableQuiz', idsColumns, (err, res) ->
            if (!err)
                for i in _.range(res.length)       
                    $('#' + idsColumns[i]).text( res[i] )


                # Set status of quizDone to 1 (done)
                Session.set('quizDone', 1)
        )

        return 0

常量区域内的表中的值在不活动后消失

问题描述

相关代码

0 个答案: