Dynamically instantiating and removing a partial view

Is it possible to dynamically render a partial handlebar template and also to remove it from DOM via javascript? I also need to render more than one instance from the template. Is it possible using mojito API's ? Please advise. If any code examples are available, please guide.

12 Replies
  • The docs about partials is here:


    I'm not so sure I understand your question. Can you explain what are you trying to do?

  • I want to instantiate/render a view based on a template. But there could be multiple views based on the same template. Something like creating multiple objects out of a class. My use case is something like this - Say I have 10 forms in a list, which are filled and is not in an editable state. When not in editable state they will be displaying limited information and when in editable more the view changes and will have much more information. I am planning to create a template for the editable view of the form. When a user wants to edit a form I will instantiate the template with actual data and display it in the current position of the non-editable view of the form. And when a user submits the changes I want to change it back to the non-editable view. I hope I was able to articulate what I intend to do. If not I will try to explain more.

  • I think you're talking about composition, and mojito provides some stuff to enable you to define child views, configuration of those child views, replacement of the child views, etc.

  • I figured out how to do it in a different way. I defined a handlebar template via script type "text/x-handlebars-template" and Followed the documentation here http://handlebarsjs.com/

    But now I have a problem with registering handlebar helper. This I have in my template

    {{#generateSelect tasks}} {{text}} {{/generateSelect}}

    And I am registering the handler at bind like this.

     bind: function(node) {
                var me = this;
                this.node = node;
                 * Handlebar handler for creating list
                 Y.Handlebars.registerHelper('generateSelect', function(items, options) {...});

    But mojito complains that Couldnot find property 'generateSelect

    /home/jithine/g11n/node_modules/mojito/node_modules/yui/handlebars-base/handlebars-base-min.js:6 Missing",function(e){if(arguments.length===2)return undefined;throw new Error( ^ Error: Could not find property 'generateSelect'

    Is YUI not registering the handler properly?

  • I did see this tutorial - http://developer.yahoo.com/cocktails/mojito/docs/dashboard_tutorial/09_custom_views.html but I am getting same error as above even after using mojito-helper-addons

  • I think what is happening is mojito is processing the "text/x-handlebars-template" script which I do not want. Will ask a separate question for that.

  • well, I need a repro case to be able to help here, but few things I can tell:

    1) we do not encorage people to use script with text/x-handlebars-template type because that means you will need to download the whole "handlebars" engine to the client side (which is considerable big with respect to the regular "handlebars-base" that mojito uses. Also because it will require string manipulations in the client side, which is always slow. Instead, we encourage people to write their templates into individual files, and then reference them by a logical name detonated by the filename, and let mojito to load that over the network in a form of a yui module.

    2) the way you're registering that helper using Y.Handlebars.registerHelper from a binder means that this is only available on the client side, which goes against the principles in mojito where you create things that might work in both sides of the fence. So, you might consider to use regular partials (you can add partials under the partials/ folder under views folders, and they will be automatically available, including dependencies resolution.

  • I need this to be on client side because because this is a client side interaction. The html is generated dynamically when user clicks a button. And it is the content of this view I am trying to templatize.

    Now because Mojito will parse this x-handlebars-template if I put it in any of the view, I will have to store the template in javascript as a string.

    From reading mojito docs I am not sure if this is something mojito supports out of the box - just have a template which I can dynamically instantiate from client side. This dynamic instantiation cannot be on server side because this is the result of a user interaction.

  • ok. I think I can do this by dynamically defining mojit instance via ac._dispatch() - http://developer.yahoo.com/cocktails/mojito/docs/topics/mojito_run_dyn_defined_mojits.html#using-ac-dispatch

  • mojito will NOT parse any x-handlebars-template from any of the template, that's probably handlebars compiler, which is used by mojito.

    yes, creating a child mojit instance, and dispatching it is what you should normally do to update part of the content of a mojit UI in the mojit binder, and if the new instance of the child mojit is going to render a template, it will load the template dynamically (views/*.hbs) and will get them ready for you dynamically, and you have to do NOTHING :)

  • OK. Now I am stuck.

    For some reason the dispatch fails with the following error.

    error: (mojito-output-buffer): Error executing: 'undefined':
    error: (mojito-output-buffer): Cannot read property 'staticAppConfig' of undefined
    error: (mojito-output-buffer):
     TypeError: Cannot read property 'staticAppConfig' of undefined

    This is from my parent binder bind method

    this.mojitProxy.invoke("dispatch", {data: {}}, this.dispatchCallback);

    This is parent controller dispatch method

     65         dispatch: function(ac) {
     66               var command = {
     67                 "instance" : {
     68                   "type" : "TaskCreate",
     69                 },
     70                 "context" : ac.context,
     71                 "params" : {},
     72               };
     73               ac._dispatch(command, ac);
     74          }

    Child controller index

     25         index: function(ac) {
     26             //Y.log(ac);
     27             ac.assets.addCss('./index.css');
     28             ac.done({
     29             });
     30         }

    Could you please tell me what I might be doing wrong?

  • The above error was because of not requiring 'mojito-output-buffer'. Overall this works.


Recent Posts

in Yahoo! Mojito