npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

js-backbone-view

v1.1.2

Published

Better handling for backbone views.

Downloads

3

Readme

backbone-view

General

This view extends the Backbone.View with some new features:

  • sub views by config
  • inserting of rendered HTML by replace, append, prepend, before or after
  • define a template (lodash template or underscore template or string) as property. This makes the render function in most cases obsolete
  • template data function with default values
  • render on initialize

Install

bower install backbone-view --save
npm install js-backbone-view --save

Usage

Following properties are available:

  • rendered ... defines this view as rendered or not
  • renderOnInitialize ... if TRUE this view will be rendered, if the view will be initialized. Default true
  • templateInsertType ... defines the type of inserting the rendered HTML. Default View.TEMPLATE_INSERT_TYPE_REPLACE Following template insert types are available
    • View.TEMPLATE_INSERT_TYPE_REPLACE ... the content of view $el will be replaced.
    • View.TEMPLATE_INSERT_TYPE_APPEND ... the rendered html will be appended to the view $el. View $el will be changed to the appended element.
    • View.TEMPLATE_INSERT_TYPE_PREPEND ... the rendered html will be prepended to the view $el. View $el will be changed to the prepended element.
    • View.TEMPLATE_INSERT_TYPE_BEFORE ... the rendered html will be inserted before the view $el. View $el will be changed to the inserted element.
    • View.TEMPLATE_INSERT_TYPE_AFTER ... the rendered html will be inserted after the view $el. View $el will be changed to the inserted element.
  • config ... defines a config for sub views. This config is an object of sub view configuration. The key defines the view name for handling by this view. An entry can be a function, which must return a view or a object like this
    {
        "view": ViewLI, // defines the view constructor und must be a Function, which can be instanciated.
        "enabled": true, // enabled or disables this entry. If value TRUE, then the view will be rendered. If not, then the view will be not rendered
        "options": { // options for the view, which will be given to the view constructor
            "renderOnInitialize": false
        }
    }
    Every sub view becomes the property layout setted with the parent view.

Following functions are available:

  • createView ... this will create the sub view and can be used to extends the options
  • extractViewConstructor ... this function gets the sub view constructor and a callback. The callback must be called with a full qualified view constructor. This function can be used for AMD Loading.
  • getTemplateDataForRender ... this function returns a object for the template, which defines the template parameters. Per default is view (the current view instance) and View (the View constructor) defined.

Example

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
    <script src="https://rawgit.com/DasRed/js-backbone-prototype-compatibility/master/compatibility.js"></script>
    <script src="view.js"></script>
</head>
<body>
    <main><span>Some Text</span></main>

    <script>
        let View = Backbone.ViewEx;
        function ViewLI(options) {
            View.apply(this, arguments);
        }

        ViewLI.prototype = Object.create(View.prototype, {
            text: {
                value: null,
                enumerable: true,
                configurable: true,
                writable: true
            },

            template: {
                value: '<li>${view.text}</li>',
                enumerable: true,
                configurable: true,
                writable: true
            },

            templateInsertType: {
                value: View.TEMPLATE_INSERT_TYPE_APPEND,
                enumerable: true,
                configurable: true,
                writable: true
            }
        });


        function ViewUL(options) {
            View.apply(this, arguments);
        }

        ViewUL.prototype = Object.create(View.prototype, {
            config: {
                value: {
                    li1: {view: ViewLI, options: {text: 'li 1'}},
                    li2: {view: ViewLI, options: {text: 'li 2'}},
                    li3: {view: ViewLI, options: {text: 'li 3'}},
                    li4: {view: ViewLI, options: {text: 'li 4'}},
                    li5: {view: ViewLI, options: {text: 'li 5'}},
                },
                enumerable: true,
                configurable: true,
                writable: true
            },
            template: {
                value: '<ul>...</ul>',
                enumerable: true,
                configurable: true,
                writable: true
            }
        });

        ViewUL.prototype.createView = function(key, config) {
            config.options.el = this.$el.find('ul').eq(0);

            return View.prototype.createView.call(this, key, config);
        };

        new ViewUL({el: 'main'})
    </script>
</body>
</html>

This will produce following HTML:

<html><head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
    <script src="https://rawgit.com/DasRed/js-backbone-prototype-compatibility/master/compatibility.js"></script>
    <script src="view.js"></script>
</head>
<body>
    <main>
        <ul>
            <li>li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
            <li>li 5</li>
        </ul>
    </main>
</body>
</html>

and following console logs:

Creating view "li1" for layout.
AnonymousView (view2) created.
Start rendering of view "li1" for layout.
View "li1" rendered for layout.
View "li1" created for layout.
Creating view "li2" for layout.
AnonymousView (view3) created.
Start rendering of view "li2" for layout.
View "li2" rendered for layout.
View "li2" created for layout.
Creating view "li3" for layout.
AnonymousView (view4) created.
Start rendering of view "li3" for layout.
View "li3" rendered for layout.
View "li3" created for layout.
Creating view "li4" for layout.
AnonymousView (view5) created.
Start rendering of view "li4" for layout.
View "li4" rendered for layout.
View "li4" created for layout.
Creating view "li5" for layout.
AnonymousView (view6) created.
Start rendering of view "li5" for layout.
View "li5" rendered for layout.
View "li5" created for layout.
AnonymousView (view1) created.