diff --git a/docs/0.7/Get started.md.hbs b/docs/0.7/Get started.md.hbs index 1249d40..119ec9b 100755 --- a/docs/0.7/Get started.md.hbs +++ b/docs/0.7/Get started.md.hbs @@ -4,7 +4,7 @@ title: Get started Welcome! These pages aim to provide all the information you need to master Ractive. -If you see something wrong, out of date, or missing from this documentation, please [raise an issue on GitHub](https://github.com/ractivejs/docs.ractivejs.org/issues) or - even better - submit a pull request. Your fellow Ractive users will thank you! +If you see something wrong, out of date, or missing from this documentation, please check out our {{{createLink 'Known issues, FAQs, and Tips' 'known issues and FAQs'}}}, [raise an issue on GitHub](https://github.com/ractivejs/docs.ractivejs.org/issues) or - even better - submit a pull request. Your fellow Ractive users will thank you! Using Ractive is very simple. An instance is created using `new Ractive({...})` with the desired options: diff --git a/docs/edge/Tips.md.hbs b/docs/0.7/Known issues, FAQs, and Tips.md.hbs similarity index 65% rename from docs/edge/Tips.md.hbs rename to docs/0.7/Known issues, FAQs, and Tips.md.hbs index 2fde34a..e8dfc43 100644 --- a/docs/edge/Tips.md.hbs +++ b/docs/0.7/Known issues, FAQs, and Tips.md.hbs @@ -1,8 +1,22 @@ --- -title: Tips +title: Known issues, FAQs, and Tips --- -Using Ractive with... ---------------------- + +## Known Issues + +### Memory and crashing issues with Safari on iOS 9 + +It seems that Apple has introduced some memory management _feature_ with Safari in iOS 9 that causes large templates to crash Safari during parsing. Fortunately, this can be worked around by splitting your templates into smaller partials or, more efficiently, by pre-parsing your templates and serving them as a JS object. You can use {{{createLink 'Ractive.parse()'}}} to create the JS object as a build step or when the page is being served. + +Since there isn't _really_ any browser for iOS other than Safari, all browser on iOS 9 are affected by this issue. iOS 8 seems to remain unaffected. + +## FAQs + +__Coming Soon!™__ + +## Tips + +### Using Ractive with... * {{{createLink 'using-ractive-with-backbone' '...Backbone'}}} * {{{createLink 'using-ractive-with-requirejs' '...RequireJS'}}} @@ -12,8 +26,7 @@ Using Ractive with... * {{{createLink 'using-ractive-with-jquery-mobile' '...jQuery Mobile'}}} -Building an app with Ractive ----------------------------- +### Building an app with Ractive Ractive can take care of your UI, and for simple applications it can take care of your *application state* as well. But if you're building a complex app you'll likely have other things to worry about as well - routing and history management, fetching and saving data to and from a server, validating data, handling realtime communication, user authentication, and all the other fun stuff that goes into a web app. diff --git a/docs/0.7/Tips.md.hbs b/docs/0.7/Tips.md.hbs index 2fde34a..5e9b446 100644 --- a/docs/0.7/Tips.md.hbs +++ b/docs/0.7/Tips.md.hbs @@ -1,8 +1,22 @@ --- -title: Tips +title: Known issues, FAQs, and Tips --- -Using Ractive with... ---------------------- + +## Known Issues + +### Memory and crashing issues with Safari on iOS 9 + +It seems that Apple has introduced some memory management _feature_ with Safari in iOS 9 that causes large templates to crash Safari during parsing. Fortunately, this can be worked around by splitting your templates into smaller partials or, more efficiently, by pre-parsing your templates and serving them as a JS object. You can use {{{createLink 'Ractive.parse()'}}} to create the JS object as a build step or when the page is being served. + +iOS 8 seems to remain unaffected. + +## FAQs + +__Coming Soon!&tmp;__ + +## Tips + +### Using Ractive with... * {{{createLink 'using-ractive-with-backbone' '...Backbone'}}} * {{{createLink 'using-ractive-with-requirejs' '...RequireJS'}}} @@ -12,8 +26,7 @@ Using Ractive with... * {{{createLink 'using-ractive-with-jquery-mobile' '...jQuery Mobile'}}} -Building an app with Ractive ----------------------------- +### Building an app with Ractive Ractive can take care of your UI, and for simple applications it can take care of your *application state* as well. But if you're building a complex app you'll likely have other things to worry about as well - routing and history management, fetching and saving data to and from a server, validating data, handling realtime communication, user authentication, and all the other fun stuff that goes into a web app. diff --git a/docs/edge/Get started.md.hbs b/docs/edge/Get started.md.hbs index 9d506ed..26f99da 100755 --- a/docs/edge/Get started.md.hbs +++ b/docs/edge/Get started.md.hbs @@ -4,7 +4,7 @@ title: Get started Welcome! These pages aim to provide all the information you need to master Ractive. -If you see something wrong, out of date, or missing from this documentation, please [raise an issue on GitHub](https://github.com/ractivejs/docs.ractivejs.org/issues) or - even better - submit a pull request. Your fellow Ractive users will thank you! +If you see something wrong, out of date, or missing from this documentation, please check out our {{{createLink 'Known issues, FAQs, and Tips' 'known issues and FAQs'}}}, [raise an issue on GitHub](https://github.com/ractivejs/docs.ractivejs.org/issues) or - even better - submit a pull request. Your fellow Ractive users will thank you! Using Ractive is very simple. An instance is created using `new Ractive({...})` with the desired options: diff --git a/docs/edge/Keypaths.md.hbs b/docs/edge/Keypaths.md.hbs index fc4a23b..93c9f88 100644 --- a/docs/edge/Keypaths.md.hbs +++ b/docs/edge/Keypaths.md.hbs @@ -66,4 +66,8 @@ ractive = new Ractive({ }); ractive.get( 'letters[0]' ); // returns undefined -``` \ No newline at end of file +``` + +## Escaping + +While not ideal, sometimes properties of objects have `.`s in name e.g. `foo['bar.baz']`. Note that while numbers are supported in array notation, strings are not. To access a peypath with a literal `.` in one of the keys, you can escape it with a `\` e.g. `foo.bar\.baz`. Any keys accessible in the template will be unescaped, so if you're trying to use them with simple string concatenation to access a keypath with a `.` in it, you'll need to make sure you escape it first. diff --git a/docs/edge/Known issues, FAQs, and Tips.md.hbs b/docs/edge/Known issues, FAQs, and Tips.md.hbs new file mode 100644 index 0000000..e8dfc43 --- /dev/null +++ b/docs/edge/Known issues, FAQs, and Tips.md.hbs @@ -0,0 +1,37 @@ +--- +title: Known issues, FAQs, and Tips +--- + +## Known Issues + +### Memory and crashing issues with Safari on iOS 9 + +It seems that Apple has introduced some memory management _feature_ with Safari in iOS 9 that causes large templates to crash Safari during parsing. Fortunately, this can be worked around by splitting your templates into smaller partials or, more efficiently, by pre-parsing your templates and serving them as a JS object. You can use {{{createLink 'Ractive.parse()'}}} to create the JS object as a build step or when the page is being served. + +Since there isn't _really_ any browser for iOS other than Safari, all browser on iOS 9 are affected by this issue. iOS 8 seems to remain unaffected. + +## FAQs + +__Coming Soon!™__ + +## Tips + +### Using Ractive with... + +* {{{createLink 'using-ractive-with-backbone' '...Backbone'}}} +* {{{createLink 'using-ractive-with-requirejs' '...RequireJS'}}} +* {{{createLink 'using-ractive-with-browserify' '...Browserify'}}} +* {{{createLink 'using-ractive-with-yeoman' '...Yeoman'}}} +* {{{createLink 'Promises' '...built-in Promise support'}}} +* {{{createLink 'using-ractive-with-jquery-mobile' '...jQuery Mobile'}}} + + +### Building an app with Ractive + +Ractive can take care of your UI, and for simple applications it can take care of your *application state* as well. But if you're building a complex app you'll likely have other things to worry about as well - routing and history management, fetching and saving data to and from a server, validating data, handling realtime communication, user authentication, and all the other fun stuff that goes into a web app. + +Unlike mega-frameworks like Angular and Ember, Ractive doesn't have an opinion about these things - you're encouraged to build your app from loosely coupled modules. It means you're not beholden to a particular framework's way of doing things, and you can swap out (for example) your routing library for something better later on, but it does mean that you're now responsible for making those decisions. + +This section is designed to help with that, by collecting tips and advice. If you think your experience can help other developers, please add it to the wiki! + +* {{{createLink 'Routing'}}} diff --git a/docs/edge/Migrating.md.hbs b/docs/edge/Migrating.md.hbs index 20e103a..e099ca7 100644 --- a/docs/edge/Migrating.md.hbs +++ b/docs/edge/Migrating.md.hbs @@ -8,10 +8,48 @@ These migration notes are cribbed from the [CHANGELOG](https://github.com/ractiv ### What's new -*Nothing yet* +Ractive's data handling has been completely rewritten to use a full viewmodel hierarchy as opposed to the previous hashmap-like implementation. This has made the code much easier to reason about, and it should also eliminate many data-related bugs. It also has made large swaths of Ractive considerably faster. + +Spread arguments (`...arguments`) and `arguments` access is now available for method event handlers. Individual arguments are available using array notation (`arguments[n]`), dot notation (`arguments.0`), or `1`-based dollar vars, like regular expression matches (`$1`, `$2`, etc). + +There is now support for linking data to extra keypaths in the model. This is particularly handy for master-detail scenarios where you have a complex list of objects and you want to focus on a single one at a time. A keypath like `'foo.bar.bazzes.0'` can be linked to `'baz'` so that the detail section doesn't have to worry about a non-bindable expressions or copying objects around. Both sides of the link are automatically kept in sync. See {{{createLink 'ractive.link()'}}}. + +You can now use ES2015 object literal shorthand in templates e.g. `{ foo }` is equivalent to `{ foo: foo }`. + +If you have object keys with `.`s in them, you can now escape them with a `\`. So if you have a `bar` object with a `foo.baz` property, it can be accessed with `bar.foo\.baz`. Keypaths in the template are given as escaped paths so that they can be used directly with Ractive methods. There are also a few new static methods on `Ractive` to deal with escaping, unescaping, splitting, and joining keypaths. + +`` is equivalent to ``. + +Progressive enhancement is now supported with a few limitations. If you pass `enhance: true` when creating your Ractive instance, it will not discard the contents of its target element and will instead try to reuse elements and nodes as it builds the virtual DOM from its template. This option is incompatible with the `append` option. + +The `Object`, `String`, and `Boolean` globals are now accessible from within templates. + +You can now set up aliases with context and iterative mustache sections that can be used to clarify templates and avoid issues with object-literal context sections and two-way binding. For context sections, use `\{{#with someExpressionOrRef as alias1, some.deeply.nested[reference].expression as alias2}}...\{{/with}}` to set up as many aliases as you need. For iterative sections, you can alias the context with the iteration (the current item) by using `\{{#each some.list as item}}...\{{/each}}`. Partial contexts also support aliasing, since partial context is just a shortcut for `\{{#with context}}\{{>partial}}\{{/with}}`, as `\{{>somePartial some.path as alias1, some.other[expression](arg1, arg2) as alias2}}`. + +There is a new CSP-compatible parsing mode that collects all of the expressions in the template at the end of the parse and stores them as `function`s on the template root. At render-time, any expressions look for a corresponding pre-built function before using `new Function(...)` to create one. Templates parsed in this way are no longer JSON compatible. To enable this mode, pass `csp: true` when pre-parsing your template. + +If your environment supports it, you can now use Unicode characters from the Supplementary Multilingual Plane and the Supplemental Idiographic Plane in your templates. + +There are two new special references available on your templates for access to the current Ractive instance and your environment's global object. `@ractive` will resolve to the nearest Ractive instance in the template, which includes components should the template belong to one. `@global` resolves to `window` in most browsers and `global` in Node.js. Both special references are also available outside of the template so that Ractive can be notified of changes outside the template easily. + +Keywords can now be used as references, so you can now use `new`, `if`, `while`, etc as references. + +Keypaths within components are now adjusted to be relative to the component. If you need to access the path to the data relative to the root instance, you can use the new special reference `@rootpath`. + +Partials defined in `