Handle ViewModel component property value to be null during instantiation

Properties in ViewModel can be initialized to null when instantiating a component

Slots able to pass individual values

Fixes #292

count:from="count" works below:

can.Component.extend({
    tag: "my-counter",
    view: `
        <can-slot name="incrementButton"
            add:from="add">
            <button on:click="add(1)">+1</button>
        </can-slot>
        <can-slot name="countDisplay"
            count:from="count">
            {{count}}
        </can-slot>
    `,
    ViewModel: {
        count: {type: "number", default: 0},
        add(increment){
					debugger;
            this.count += increment;
        }
    }
});

element.viewModel

Adds a .viewModel property to component elements. can-view-model can take a hike!

v4.2.4

Fixed adding a programmatically-instantiated component that has already been torn down 2152734

v4.2.3

Fix an issue with programmatically-instantiated components not being torn down correctly #277

v4.2.0

This release makes it possible to create new component instances with new, without rendering the instances in a template. This is useful when you:

• have complex logic for switching between different components (e.g. routing)
• want to create components without adding them to the page (e.g. testing)

The following defines a MyGreeting component and creates a my-greeting element by calling new on the component’s constructor function:

const HelloWorld = Component.extend({
	tag: "hello-world",
	view: `
		<can-slot name="greetingTemplate" />
		<content>world</content>
		<ul>{{#each(items)}} {{this}} {{/each}}</ul>
	`,
	ViewModel: {
		items: {}
	}
});

// Create a new instance of our component
const componentInstance = new HelloWorld({

	// values with which to initialize the component’s view model
	viewModel: {
		items: ["eat"]
	},

	// can-stache template to replace any <content> elements in the component’s view
	content: "<em>{{message}}</em>",

	// <can-template> strings rendered by can-stache with the scope
	templates: {
		greetingTemplate: "{{greeting}}"
	},

	// scope with which to render the <content> and templates
	scope: {
		greeting: "Hello",
		message: "friend"
	}
});

myGreetingInstance.element; // is like <my-greeting>Hello <em>friend</em> <ul> <li>eat</li> </ul></my-greeting>

myGreetingInstance.viewModel; // is HelloWorld.ViewModel{items: ["eat"]}

Changing the component’s view model will cause its element and any bindings to be updated:

myGreetingInstance.viewModel.items.push("sleep");

myGreetingInstance.element; // is like <my-greeting>Hello <em>friend</em> <ul> <li>eat</li> <li>sleep</li> </ul></my-greeting>

See the Programmatically instantiating a component section for details.

This release contains the following pull requests:

• Allow components to be instantiated with new #237
• Add support for rendering components in stache templates #238
• Allow components to be instantiated with <content /> #240
• Allow components to be instantiated with viewModel bindings #243
• Allow components to be instantiated with slot templates #267
• Add "use strict" #269

Register stache bindings using stache.addBindings

v4.1.3

4.1.3

upgrades can-view-nodelist dependency

v4.1.2

4.1.2

v4.1.1

Fix can-string dependency to <2.0.0 #255

Remove can-util deps

v4.1.0

4.1.0