Funny behavior with bindings (item multiplied)

[ile]

When an item is inserted to an array, the rendering has a glitch: the new item is shown multiple times at the end of the list (N times where N is the total length of the list - I think). The extra items are shown only for a fraction of a second, after which they disappear. But, on another app the extra items are not disappearing until a page refresf (not sure why).

A video of it: http://youtu.be/NbDkqKqqCAM

The code is simple:

var app = module.exports = require('derby').createApp('hello', __filename);
app.loadViews(__dirname);
var Comments;

app.component(Comments = (function() {
  function Comments() {}

  Comments.prototype.name = 'comments';
  Comments.prototype.add = function() {

    var comment = {
      id: this.model.id(),
      text: this.model.root.get('_page.comment')
    }

    console.log(this.model.root.get('_page.comment'));

    this.model.root.push('_page.comments', comment);

  };

  return Comments;

})());


// Routes render on client as well as server
app.get('/', function(page, model) {
  // Subscribe specifies the data to sync
  var comments = model.at('comments.foo')
  model.subscribe(comments, function(err) {
    model.ref('_page.comments', comments.at('list'));
    page.render();
  });
});

<Body:>
    <view name="comments" as="comments"></view>
    <view name="list" comments="{{_page.comments}}"></view>
    <view name="comment-form"></view>

<list:>
    <ul>{{each @comments as #comment}}<view name="comment"></view>{{/}}</ul>

<comment:>
    <li>{{unescaped #comment.text}}</li>

<comment-form:>
    <form>
        <input value="{{#root._page.comment}}">
        <button on-click="comments.add()">Add</button>
    </form>

[ile]

Took a look. This had to do with attributes (comments="{{_page.comments}}").

How to fix this I'm not sure, but I did this:

I changed this:

AttributePathExpression.prototype.dependencies = function(context, forInnerPath) {
  var attributeContext = context.forAttribute(this.attribute);
  // Attributes are either a ParentWrapper or a literal value
  var value = attributeContext && attributeContext.attributes[this.attribute];
  var inner = value && (typeof value.dependencies === 'function') &&
    value.dependencies(attributeContext, true);
  var outer = outerDependency(this, context, forInnerPath);
  return concat(outer, inner);
};

To this:

AttributePathExpression.prototype.dependencies = function(context, forInnerPath) {
  return outerDependency(this, context, forInnerPath);
};

Did I break something as well?

This function was returning segments that didn't seem right for the each block. That is, the <li> were getting segments such as _page.comments which should be defined only for the <ul> I think.

[craigbeck]

Thanks for your contributing your issue.

We have recently been actively updating the Derby and Racer packages, and both repos are now in Typescript and published with types on npm. As we have quite a few old issues open we have made the decision to close out of date issues.

If this issue still matters to you we encourage reproducing against the current versions of the repo and opening a new issue.