Giter Site home page Giter Site logo

Comments (6)

ermouth avatar ermouth commented on July 24, 2024

First, nice to see you use id function.

For the question, there are three different approaches.

1/ You are in the DOM, so you can, using jQuery syntax, just check if your child form is the last in its parent container. It‘s not “academically” clear, but quiet effective.

2/ You can have a function inside each child form, that have acces to top levels. This approach is more general.

{
  data:{  listElts:[ /*elements of a list*/] },
  ChildFormManifest:{/* here goes child form manifest*/},
  GetRootList: function(){ return this.data.listElts},
  ui:{
    "#list":{
      data:"listElts",
      manifest: function(){
        return $.extend(true, {}, this.ChildFormManifest, {GetRootList: this.GetRootList});
      }
    }
  }
}

3/ Third approach is very similar to second, but you extend child manifest on lis init, that is faster, but less flexible. Kinda static binding.

{
  data:{  listElts:[ /*elements of a list*/] },
  ChildFormManifest:{/* here goes child form manifest*/},
  GetRootList: function(){ return this.data.listElts },
  ui:{
    "#list":{
      init: function (){ this.ChildFormManifest.GetRootList = this.GetRootList },
      data:"listElts",
      manifest: "this.ChildFormManifest"
    }
  }
}

So for 2 and 3 you have this.GetRootList() function inside each child‘s form, which returns entire array with data. Comapring child form‘s data with this.GetRootList().last() using ===, you detect, if your child form is last in the list.

from jquery.my.

maxdlx avatar maxdlx commented on July 24, 2024

Hi,
thx for your input!

I have thought about the different ways to solve it. My solution was just like your 2) using GetContent() function on the parent and comparing the index in my 'id' function.
id: function(e, i) {
e.idx = i+1;
e.firstChild = i === 0;
e.lastChild = i === this.getContent().length - 1;
return 'c3-q-' + e.idx;
},
It works, but...

When the "Add row" button triggers an 'insert' event on the list, or a row is deleted, the items do not get re-rendered. Same problem with the other approaches. The only solution would be to hack everything into a single callback and recalculate the list items on every insert/removal.

How do you solve this issue? Have you come across this in the past?

from jquery.my.

ermouth avatar ermouth commented on July 24, 2024

the items do not get re-rendered

You mean rows are not deleted/inserted, or what? If one row has not changed, why should it re-render?

from jquery.my.

maxdlx avatar maxdlx commented on July 24, 2024

The new items are re-rendered, but the rest of the list does not notice the change. The previous "lastChild" still has the "lastChild" attribute, and I don't know how to propagate the event to all list items

from jquery.my.

ermouth avatar ermouth commented on July 24, 2024

Do you use .hash function? It can be useful for your case, I hope.

It is used to indicate element has changed. Make it return different values if list length changed – and you will get total list re-render on add/remove, or it can depend on other events, or parent form state, or whatever.

By default, when you have not defined it explicitly, built-in hash function only changes when child form contents changed, it does not know anything about outside world. So make it know.

This default approach was chosen to avoid total list re-render on every single row changed/removed/added, that is surely ineffective for long lists.

You can also skip defining .hash and make .id function do the same – return value, dependent on list length – but this is less effective for several reasons and undesirable, if do not understand clearly, what you‘re doing.

See this example http://jquerymy.com/#CW-masterdeta – here you can drag items and see how numbers are changing during drag both in master and detail. It‘s much more tricky, but it‘s the shortset implementation of this kind of functionality I ever seen. So it can help you to go deep into things.

from jquery.my.

maxdlx avatar maxdlx commented on July 24, 2024

Thanks for the hint to 'hash' function when list length changes, I will try that!

Best regards
Chris

from jquery.my.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.