With the graphql api it's possible to fetch everything we need. The api is still early access/alpha and so has some bugs I needed to work arround and some things that don't work as smooth as I hoped. But that's okay. Because it's an alpha version some things could go wrong with a release, but nothing I shouldn't be able to fix within a few minutes. So I guess that's fine. GraphQL is nicer than normal REST APIs (previously I hit the limit of github api calls) and now it's maybe a couple dozen of calls instead of a couple hundred. I would like it to have more options to query or to set vars within an query (SQL subselect-ish) but I guess it's a start.

Detection before it tries to publish anything:

• checks if GIT_KEY, GIT_USER and GIT_EMAIL are set in the env.
• checks if the package.jsons version property in the project root has been changed in the last commit.
• checks if there is yet a release on github with the same version (prevents errorss if somehow a travis build is triggert twice for one commit).

Github releases work fine. It tags, commits and then pushes to the repo. After that it fetches the issues, prs, build a release log and publishes it with the github release (currently via the REST api the GraphQL API can't create releases (yet)).

With the last commit it also publishes/updates the npm package between pushing the tag&commit and publishing the release. It's not tested, but it just needs the NPM_TOKEN env var set and after switching the processes cwd to the dist/npm dir the npm-utils node module does the rest.

Here the test github release on my jsblocks fork. And here the tavis log of the build.

The release will be availble on:

• github
• bower
• npm
• jsdelivr (because there bot also fetches github)

Tell me if I missed something.

This add 3 new dev dependencies:

1. node-fetch: just a pure-js dependency, I just like fetch more than the node-api and because it's just a small dependencie I took it
2. npm-utils: a wrapper for the npm cli that also handles auth via env vars.
3. nodegit: that's the heavy one, it requires a c++ 11 compiler on exotic node versions (for lts and current versions it just downloads binaries on the supported platforms). It also required me to let travis fetch a current c++ 11 stdlib, makes travis builds a little slower. If you whish we can move that dependencies to an other package.json and only install them if we need them. I also updated the nodejs version travis uses to tha last LTS, I think the last LTS is the version we should focus on and also some of the dependencies required a current release.

I also created a JSBlocks-CI github and npm user. [edit:] These two have currently the email address: [email protected] running on my mailserver if you wish we can change that to some other address (e.g. a @jsblocks.com address) otherwise I'm fine with leaving them running on my mail-server. [/edit] Once these two have access and I added the env-vars to travis we should be ready to go.

Tell me what you think.

I'm trying to combine jsblock with websockets using socket.io, however I can't figure out how to update a view from outside (from the callback of the socket) any ideas on how to get about this?

EDIT: I forgot to include to code I'm using

'use strict';
var App = blocks.Application();

var Message = App.Model({
    author: App.Property({
        defaultValue: 'anonymous'
    }),
    message: blocks.observable()
});

var Messages = App.Collection(Message, {
    even: blocks.observable(function () {
        return this().length % 2 == 0;
    })
});

App.View('Chat', {

    name: 'Wannes Gennar',
    newMessage: Message(),

    init: function () {
        this.socket = io('http://localhost:3000');
        this.messages = Messages();

        var service = this;
        console.log(service);

        this.socket.on('chat message', function (msg) {
            service.messages.push({
                message: msg
            });
        });
    },

    addMessage: function () {

        this.socket.emit('chat message', { author: this.newMessage.author, message: this.newMessage.message });
        this.newMessage.reset();
    },

    up: function(e)
    {
        if (e.which === 13)
            this.addMessage();
    }
});

Found in the shopping example. Steps to reproduce:

• open the shopping-example
• click under "CATEGORIES" on "UNDERWEAR"
• click under "BRANDS" on "RACH"
• click under "CATEGORIES" on "ALL"

I have no time to spend on this today but I can look into this later this week.

My first my example app

https://github.com/SubKit/sk-todo-app/tree/master/src/jsblocks

the initial load and rendering time is slow. It flickers when starting. Any ideas?

The values doesn't seem to be interpolated in the style attribute. However, it works on other attributes (even with a misspelled stye attribute).

<!doctype html>
<html>
  <head>
    <script src="http://jsblocks.com/jsblocks/blocks.js"></script>
    <script>
      window.box = {};
      box.height = blocks.observable("250");
      box.width = blocks.observable("250");
      box.backgroundColor = blocks.observable("#fff");
      blocks.query(box);
    </script>
  </head>
  <body>
    Enter Height: <input type="text" data-query="val(height)" />
    Enter Width: <input type="text" data-query="val(width)" />
    Enter Background Color: <input type="text" data-query="val(backgroundColor)" />
    <h2>Height: {{height}}</h2>
    <h2>Width: {{width}}</h2>
    <h2>Background Color: {{backgroundColor}}</h2>
    <div style="background-color: {{backgroundColor}}; height: {{height}}px; width: {{width}}px;"></div>
  </body>
</html>

Hi,

I got this API return:

json = {"id":2,"name":"Future Labs","address":null,"city":null,"state":null,"country":null,"website":null,"postal_code":null,"time_zone":null,"activated":null,"number_of_employees":null,"parent_company_id":null,"sales_rep_id":null,"customer_success_rep_id":null,"created_at":"2015-12-08T04:15:53 +0000"}

My model:

var Account = App.Model({
  id: App.Property(),
  name: App.Property(),
  address: App.Property(),
  city: App.Property(),
  state: App.Property(),
  country: App.Property(),
  postal_code: App.Property(),
  website: App.Property(),
  time_zone: App.Property(),
  activated: App.Property(),
  number_of_employees: App.Property(),
  parent_company_id: App.Property(),
  sales_rep_id: App.Property(),
  customer_success_rep_id: App.Property(),
  created_at: App.Property()
});

I got error of Argument mismatch for the value that contain null.

Current view query gets only one parameter, which is name of view:

<div data-query="view('ViewName')"> </div>

Which means View init function gets no parameter. What if we want to decide template URL at init? I mean what about this:

App.View('Svg', {
  init: function (file) {
    this.options.url = 'my_img_folder/' + file + '.svg';
  }
});

<svg data-query="view('Svg', 'icon_name')" />

Or any other way to decide url on init. Is it possible anyway?

I've trying to build an simple app, but the lack of third party examples / documentation makes it difficult, I saw that there are nested views, but how it works? I just have a simple view like:

div(data-query="view(Campaigns)")
  //- ... some random stuff, tables, etc
  div(data-qery="view(Form)")

and the js:

App.View('Campaigns', {....});
App.View('Campaigns', 'Form', {....});

As can see there, form is a nested view, so I thought it need to be inside campaings view, but the view isn't loaded, how can I load this view, its b/c I don't want to have fat views so want to break into pieces, if not possible will try in server side with includes and all thats stuffs.

Also I can see that the view is loaded from the server with their html, but isn't showing even when I change their url.

PD: im using jade for templates, thats why the html is this way, but it renders ok on browser so isn't the problem there

Regards

var data = blocks.observable([
    {
        title : 'One',
        nested : [
            1,
            2,
            3
        ]
    },
    {
        title : 'Two',
        nested : [
            111,
            222,
            333
        ]
    }
]);

App.View('Contact', {
  options: {
    route: '/contact',
    url: 'views/contact.html'
  },
    data : data
});

setTimeout(function () {
     // works fine
     data.add({
        title : 'Three',
        nested : [
            33,
            2,
            333123
        ]
    });
        // does not works
        data([some data with new elements]);
        data.reset([some data with new elements]);
}, 2000);

without server rendering i get on client

Uncaught TypeError: Cannot read property 'childNodes' of undefined on 7989

// error line
 var childNodes = domElement.childNodes;

Hi Antonio, thanks for this elegant framework. Can you show me a quick way to add

• i18next
• auth checks

centrally without breaking antyhing?

Regards, E.D.

Hi,

Just want to check this: The push state is not working when I press back button from my browser. It seems like the routed function did not pick this up, but when I am on blank screen, and I refresh, it picked up and display properly. I tried many times, it has the same result when I press browser back button.

Any mis configuration that I might miss out?

Anyway to fix this issue?

Thanks.

i want to response plain string from a static file for ssl verify, however virtual ( in \node_modules\blocks\node\blocks-node.js:11829:51 ) is null if static file have no dom, its a bug or i mess something up?

_setContents: function (contents) {
      var _this = this;
      var virtual = blocks.first(parseToVirtual(contents), function (child) {
        return VirtualElement.Is(child);
      });
      this._contents = contents;
      this._elementsById = getElementsById(virtual.children());
      findPageScripts(virtual, this._options.static, function (scripts) {
        _this._scripts = scripts;
        _this._initialized = true;
      });
    },

Hi,

Could we use this: https://github.com/adunkman/connect-assets with jsblocks server?

Or https://github.com/nodeca/mincer ? Any other alternatives?

Could you give me the example to do that?

Thanks.

I think jsblocks should provide an api for the user for handling failed request. I see some possible ways to register such a handler: The often in nodejs used way:

myCollection.read(function(data, err) {
   // err here as the second argument to not break compatibility
});

Or the event way:

myCollection.on('error' /* or maybe ajax error  */, function (err) {...});

Or when creating the Model/Collection:

var MyModel = App.Model({...}, {
    options: {
        read: {
            url: '...',
            error: function(err) {...}
        }
    }
});

What do you think ?

Hi,

I would like to make an app, that will contain a page builder (HTML builder). The user selects some module (products, gallery, slider, ...) and inserts it into the page and somehow modifies it. The problem is, that I haven't found any way to create a working template or a View at runtime. (And I don't know what modules the user will be using, so I can not predefine them.) The next thing is, that these modules should be sortable, so I will need to be able to remove a module from the page and insert it somewhere else (and obsarvables must still work). (I have not tried this yet.) Is there any way to do this with jsblocks, or could be in the near future?

Thanks.